vue环境配置

333 阅读1分钟

1.根目录下配置 2.文件写如下内容

// 开发环境
NODE_ENV= 'dev'
VUE_APP_API_URL_WEB= "https://www.dev.com"
// 生产环境
NODE_ENV= 'prod'
VUE_APP_API_URL_WEB= "https://www.prod.com""

3.package.json配置

 "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "prod": "vue-cli-service serve --mode production",
    "test": "vue-cli-service serve --mode test",
    "build:dev": "vue-cli-service build --mode development",
    "build:prod": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test"
  },

4.为了方便大家测试,可以打包后这样子做

#如果没有安装live-server,可以先安装

npm install -g live-server

#然后进入你打包的那个文件夹默认是dist,打开命令行
live-server

会自动启动服务,然后就能直接看到效果

5.配置不同环境打包输出dist vue.config.js中配置

 module.exports = {
  outputDir:`dist-${process.env.NODE_ENV}`, //不同环境打包输出
  }