Vue 按环境设置编译项目

# 引言

• 今天在部署 vue 项目时发现生产环境的端口只有一个，而且被多个项目公用了，刚好此项目又没有配置服务名而是直接使用的根路径。没办法只有修改项目配置重新编译了！

# 配置

• 在项目根目录添加两个文件。

.env.alpha

1
2

NODE_ENV = 'production'
VUE_APP_BASE_URL = '/'

.env.prod

1
2

NODE_ENV = 'production'
VUE_APP_BASE_URL = '/projectName'

• 在 package.json 文件内添加不同环境的打包指令
  

  1 2 3 4 5 6 7

  "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build-test": "vue-cli-service build --mode alpha", "build-prod": "vue-cli-service build --mode prod", "lint": "vue-cli-service lint" }

• 项目中 base_url 需要使用 process.env.VUE_APP_BASE_URL 替换

• 编译命令
  

  1 2 3 4

  yarn build-test #使用.env.alpha配置文件中的参数 yarn build-prod #使用.env.prod配置文件中的参数 yarn build --mode alpha #使用.env.alpha配置文件中的参数 yarn build --mode prod #使用.env.prod配置文件中的参数