vue-cli3配置生产-测试环境及代码打包完自动压缩

vue-cli3配置生产-测试环境

配置环境变量和模式

根据 vue-cli3 文档，可以通过设置项目根目录下的 .env，.env.[mode] 文件来指定环境变量。

1. 创建一个 .env 和 .env.beta 文件，在 .env 文件中，配置如下：

   VUE_APP_URL = '/'   // 用来设置项目的 baseUrl 和路由的 base 选项 默认是根目录
   VUE_APP_MODE = ''   // 设置一个变量 区分线上生产环境和线上测试环境 默认是生产环境
   outputDir = 'dist'  // 用来设置打包后生成的文件夹的名字，默认为 dist 文件夹
   

2. 在 .env.beta 文件中，配置线上测试环境，如下：

   NODE_ENV = 'production'   // 因为是打包项目 所以 NODE_ENV 还是 production
   VUE_APP_URL = '/test/'   // 线上测试环境，部署在 test 目录下 
   VUE_APP_MODE = 'test'   // 这个变量表示当前是线上测试环境
   outputDir = 'beta'      // 将线上测试环境打包后生成的代码放在 beta 文件夹下，以示区别。
   

3. 定义好环境变量之后，把项目制定的路径配置到路由和 vue 配置文件中去：

   // router.js
   export default new Router({
       base: process.env.VUE_APP_URL,
    ...
   })
   
   // vue.config.js
   module.exports = {
        publicPath: process.env.VUE_APP_URL,
       outputDir: process.env.outputDir,
   }
   

4. 在项目代码中，可以在任意位置使用 process.env.VUE_APP_MODE 的值来判断是线上生产环境还是线上测试环境，用以编写不同的业务代码。例：

   if(process.env.VUE_APP_MODE == 'test'){
    this.name = '线上测试用户'
   }
   

5. 配置好不同模式的环境变量之后，在 package.json 里面设置一个 beta 模式：

   {
    "scripts": {
        ...
        "beta": "vue-cli-service build --mode beta"
    }
   }
   

   这样配置完之后，在命令行运行 npm run beta ，会在根目录下生成一个 beta 文件夹，里面就是打包出来的线上测试版本的项目文件。
   如果你需要同时打包正式和测试版本

   {
     "scripts": {
       ...
       "beta": "vue-cli-service build --mode beta",
       "publish": "vue-cli-service build && vue-cli-service build --mode beta"
      }
   }
   

   这样配置好之后，只要执行npm run publish， 它会自动先执行正式环境构建打包，完成之后再自动执行测试环境的构建打包。

代码自动压缩

1. 安装插件

   yarn add filemanager-webpack-plugin --dev
   

2. 安装完成之后，在 vue.config.js 里面配置一下这个插件，它提供了丰富的操作文件的选项 ，这里我只需要使用删除和压缩.

   const FileManagerPlugin = require('filemanager-webpack-plugin')
   module.exports = {
      ...
     chainWebpack: config => {
       let mode = ''
       let path = ''
       if (process.env.VUE_APP_MODE === 'test') {
         path = './beta'
         mode = '测试版'
       } else {
         path = './dist'
         mode = '正式版'
       }
       config.plugin('compress').use(FileManagerPlugin, [
         {
           onEnd: {
             delete: [
               //首先需要删除项目根目录下的dist.zip
               `${path}/*.zip` // eg: './dist/*zip
             ],
             archive: [
               //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
               {
                 source: `${path}`, // eg: './dist
                 destination: `${path}/ProjectName-${mode}-${new Date().getTime()}.zip` // eg: './dist/项目名称-正式版-时间.zip'
               }
             ]
           }
         }
       ])
     }
   }
   

3. 运行 yarn buildoryarn beta试试