vue-cli3 配置开发-测试环境

Scott 发布于2019-08-26 13:48 / 1285人阅读

摘要：实现输入一行命令，执行两条指令，分别打包线上生产环境和线上测试环境的代码。这样配置好之后，只要执行，它会自动先执行正式环境构建打包，完成之后再自动执行测试环境的构建打包，是方便接着再配置自动压缩，这里就需要使用到一个的插件。

需求

首先介绍一下本项目的背景，是基于 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`}
                      ]
                    }
                }])
        }
    }
}

欧克 ~ 大功告成 ~ ^_^ ~

服务器托管云服务器 vue-cli3 开发测试环境开发环境配置阿里云服务器测试环境配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109551.html

vue-cli3.x 新特性及踩坑记

摘要：前言都到了，所以是时候玩转一下的新特性了。安装的包名称由改成了。方法一原因的配置改变了，导致正确的不能用。打开终端，切换到根路径文件里面修改为方法二是默认路径修改了路径会出现错误。按上面的方法修改完，再全局卸载果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 评论0 收藏0
vue学习系列（二）vue-cli

摘要：一介绍是官方提供的脚手架，用来快速建立项目。标识项目名称，这个你可以根据自己的项目来起名字。初始化完成之后，进入安装目录，必须先安装项目依赖，否则无法运行。源文件需要注意的是是入口文件，下的是路由文件，文件是组件文件。一.介绍 vue-cli是官方提供的脚手架，用来快速建立项目。二.安装 npm install vue-cli -g//全局安装三.初始化项目 vue init ...

baishancloud 2019-08-26 11:50 评论0 收藏0
vue学习笔记（四）

摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。一、vue-router 1、简介我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

frank_fun 2019-08-21 17:16 评论0 收藏0
vue学习笔记（四）

摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。一、vue-router 1、简介我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

lwx12525 2019-08-01 17:50 评论0 收藏0
vue开发项目完全指南

摘要：有两种方法，一种是在开发环境中设置通过的，另一种是在服务器上修改的配置设置。这样我们以后使用访问接口就可以不加了，打包后访问也不用手动去除统一管理在项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。项目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 评论0 收藏0