#### # 引言

- 今天在部署 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配置文件中的参数

项目部署 Vue