vue-cli3 设置开辟-测试环境

2024年4月7日 181次阅读 来源: 林雪

需求

起首引见一下本项目标背景，是基于 vue-cli3.1.1 的单页运用，现在测试环境和临盆环境都在线上，而且都在同一个域名下，个中临盆环境布置在根目录下，测试环境布置在名为 test 的子目录下，依据临盆环境和测试环境的差异，某些界面和交互有纤细的差异。

依据以上项目标基本情况，分析出需求以下：

  • 完成辨别线上临盆环境和线上测试环境的环境变量，供项目代码中全局运用。
  • 完成输入一行敕令，实行两条指令，离别打包线上临盆环境和线上测试环境的代码。
  • 完成打包以后，自动将打包好的文件夹离别根据项目名+时候+环境的花样紧缩成 zip 文件

设置环境变量和形式

依据 vue-cli3 文档，能够经由过程设置项目根目录下的 .env，.env.[mode] 文件来指定环境变量。

建立一个 .env 和 .env.beta 文件，在 .env 文件中，设置以下：

VUE_APP_URL = '/'   // 用来设置项目标 baseUrl 和路由的 base 选项 默许是根目录
VUE_APP_MODE = ''   // 设置一个变量 辨别线上临盆环境和线上测试环境 默许是临盆环境
outputDir = 'dist'  // 用来设置打包后天生的文件夹的名字，默许为 dist 文件夹

在 .env.beta 文件中，设置线上测试环境，以下：

NODE_ENV = 'production'   // 由于是打包项目 所以 NODE_ENV 照样 production
VUE_APP_URL = '/test/'   // 线上测试环境，布置在 test 目录下 
VUE_APP_MODE = 'test'   // 这个变量示意当前是线上测试环境
outputDir = 'beta'      // 将线上测试环境打包后天生的代码放在 beta 文件夹下，以示区分。

定义好环境变量以后，把项目制订的途径设置到路由和 vue 设置文件中去：

// router.js
export default new Router({
    base: process.env.VUE_APP_URL,
    ...
})

// vue.config.js
module.exports = {
    baseUrl: process.env.VUE_APP_URL,  // 从 Vue CLI 3.3 起已弃用，改成publicPath
}

在项目代码中，能够在恣意位置运用 process.env.VUE_APP_MODE 的值来推断是线上临盆环境照样线上测试环境，用以编写差异的营业代码。例：

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

设置好差异形式的环境变量以后，在 package.json 内里设置一个 beta 形式：

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

如许设置完以后，在敕令行运转 npm run beta ，会在根目录下天生一个 beta 文件夹，内里就是打包出来的线上测试版本的项目文件。

至此就完成了分环境设置打包，然则如许的贫苦点在于，每次要在敕令行输入两次敕令，由于我们的项目文件都是发送给后端去布置，所以还须要把文件紧缩成 zip，每次都要手动操纵，是在有点累。所以，还须要举行一些小小的革新，完全解放俺们的双手~~

兼并构建打包敕令而且自动天生紧缩文件

将两个敕令兼并成一个很简单，只须要在 package.json 内里设置一下，新建一个新的敕令用于同时挪用两个敕令。

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

如许设置好以后，只需实行npm run publish， 它会自动先实行正式环境构建打包，完成以后再自动实行测试环境的构建打包，hin是轻易~~

接着再设置自动紧缩，这里就须要运用到一个 webpack 的插件 — filemanager-webpack-plugin。

先装置，能够在敕令行装置，也能够直接在 vue-cli3 自带的图形治理界面搜刮装置，都挺轻易。

npm install filemanager-webpack-plugin -dev

装置完成以后，在 vue.config.js 内里设置一下这个插件，它供应了雄厚的操纵文件的选项 ，这里我只须要运用删除和紧缩：

let ts = Date.parse(new Date());
module.exports = {
    ...,
    chainWebpack: (config) => {
                if(process.env.VUE_APP_MODE == 'test'){
            config.plugin('compress')
                .use(FileManagerPlugin, [{
                    onEnd: {
                      delete: [   //起首须要删除项目根目录下的dist.zip
                        './*.zip',
                      ],
                      archive: [   //然后我们挑选dist文件夹将之打包成dist.zip并放在根目录
                        {source: './dist', destination: `./biProject-${ts}-production.zip`},
                        {source: './beta', destination: `./biProject-${ts}-test.zip`}
                      ]
                    }
                }])
        }
    }
}

欧克 ~ 功德圆满 ~ ^_^ ~

    原文作者：林雪
    原文地址: https://segmentfault.com/a/1190000019201582
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞