vue-cli@3x 配置

vue-cli@3x 配置

需求

根据不同的域名打包

配置

Step1. 项目根目录中新建 .env.development 和 .env.production

1
2
3
4
5


//.env.development

NODE_ENV = development
VUE_APP_URL = "开发域名/IP源"

1
2
3
4
5


//.env.production

NODE_ENV = production
VUE_APP_URL = "生产域名/IP源"

Step2. 根目录vue.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


let target = process.env.VUE_APP_URL  // development 和 production 环境是不同的

module.exports = {
...
devServer: {
        port: 3000,
        //如果开发的时候使用的是本地mock数据，则可以注释掉proxy字段的内容
        proxy: {
            '/api': {
                target: target,
                ws: false,
                changeOrigin: true
            }
        }
    },
...
}

Step3. 根目录 package.json

1
2
3
4
5
6


"scripts": {
    "serve": "vue-cli-service serve",//开发
    "dev": "vue-cli-service build --mode development",//构建开发（域名）的包
    "build": "vue-cli-service build"//默认是构建生产（域名）的包，也可以这样配置："vue-cli-service build --mode production"
  },

Step4. 执行命令

1
2
3
4
5
6


yarn serve  //启动开发服务器

yarn dev //构建开发（域名）的打包

yarn build //构建生产（域名）的包
此页面上有什么