Vue系列 | 开发环境与生产环境的构建配置

发表于

定义开发环境变量

项目根目录下，新建.env.development文件，用于开发环境。

1
VUE_APP_PUBLIC_PATH=/data/manageplatform/mallmanagertest/

这里VUE_APP_前缀名称是固定的，不可以改变，这里我们以定义一个公共文件路径为例说明。

定义生产环境变量

项目根目录下，新建.env.production文件，用于产生环境。

1
VUE_APP_PUBLIC_PATH=/data/manageplatform/mallmanagerrelease/

使用环境变量

例如：我们在vue.config.js下使用该变量。

1
2
3
module.exports = {
  publicPath: process.env.VUE_APP_PUBLIC_PATH
}

process.env.APP_PUBLIC_PATH会在项目启动时自动加载，但问题是它怎么知道使用哪个环境的路径呢，所以我们还需做如下配置。

配置启动命令

在 package.json文件中，配置scripts启动脚本。

1
2
3
4
5
"scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service build --mode development",
    "build": "vue-cli-service build"
  },

npm run serve: 启动本地环境，可用于本地调试。
npm run dev: 打包构建，这里我们指定了 --mode development，意味着我们在开发环境，此时.env.development相关配置生效。
npm run build: 打包构建，如果没有指定mode，默认构建生产环境，所以我们的.env.production相关配置生效。当然，我们也可以手动指定 --mode production。

小结

综上，
对于开发环境部署，使用npm run dev构建版本，
对于生产环境部署，使用npm run build构建版本。