• 时间:
  • 分类: Code,Vue

今天公司项目需要分开用户前台和后台管理系统的前端，但是我们之前的前端项目是合并的，而且后台管理需要访问前台的管理界面，所以不能拆分，但是老板需要一个管理员单独的登录入口，所以我打算通过vue-cli的构建type来区分项目是前台还是后台。

NODE_ENV来区分（坑）

我最开始采用env文件下的node_env类型来区分，这样我们在构建的时候只需要配置一下packages.json的script如下

.env.admin

NODE_ENV='admin'

packages.json

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:admin": "vue-cli-service serve --mode admin",
    "build": "vue-cli-service build",
    "build:admin": "vue-cli-service build --mode admin",
}

这样我的生产环境以及测试环境下的就会读取.env.admin文件的配置，当时这个坑就是因为我太相信NODE_ENV这个状态了，我就把这个状态加进了项目的全局变量里。但是当你在构建生产环境的时候，项目并不会像production一样将所有的文件部署到一起，而是一个测试环境的版本，很多东西和原本的构建生产环境区别特别大。

例如版本更新后不会自动清理缓存的脚本没有打包进去，webpack的配置完全不可用，还有css全部没有文件化而是动态生成的，这也导致我线上版本没办法自动更新，就算我上传了也无法更新，依旧是旧版本，我必须手动清理客户端缓存才可以。

解决方案

我将.env.admin的NODE_ENV改为了production，让他走生产环境，然后我们通过添加 VUE_APP_NAME 来区别他是用户前台还是系统后台，具体.env.admin配置如下：

NODE_ENV='production'
VUE_APP_NAME='admin'

这样之后我们通过 npm run build:admin 就可以生成系统后台环境，但是这个之后我发现当我 npm run serve:admin 的时候他的NODE_ENV也是production会出现问题，所以我又新建了一个.env.admindev 来修改了 NODE_ENV 为 development，并在packages.json下配置 "serve:admin": "vue-cli-service serve --mode admindev"，这样就完全解决区分生产环境配置了。

我们以后就只需要通过 process.env.VUE_APP_NAME 来获区分生产类型啦！

标签: Vue-cli, 区分生产环境类型, env

添加新评论