Vue cli3.x打包配置

小灰灰 2023-01-17 14:54 180阅读 0赞

[https://juejin.cn/post/6844904130209644551][https_juejin.cn_post_6844904130209644551]

[http://www.manongjc.com/detail/18-xghadafkocxrqoa.html][http_www.manongjc.com_detail_18-xghadafkocxrqoa.html]

在vue-cli3的项目中，

npm run serve时会把process.env.NODE\_ENV设置为‘development’；

npm run build 时会把process.env.NODE\_ENV设置为‘production’；

此时只要根据process.env.NODE\_ENV设置不同请求url就可以很简单的区分出本地和线上环境。

在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段、预发布阶段和最终上线阶段，
    每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使
    我们的项目呈现不同的效果，使用不同的功能呢？这里就需要引入环境的概念。作为一名开发人
    员，我们可能需要针对每一种环境编写一些不同的代码并且保证这些代码运行在正确的环境中，
    这就需要我们进行正确的环境配置和管理。复制代码复制代码

一般一个项目都会有以下 4 种环境：

*  开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）
 *  测试环境（测试阶段，上线前版本，除了一些 bug 的修复，基本不会和上线版本有很大差别）
 *  预发布环境（即将上线阶段，上线前版本，预测线上出现问题的可能性，和上线版本无差别）
 *  生产环境（上线阶段，正式对外发布的版本，一般会进行优化，关掉错误报告）

**环境变量的使用**

设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用，限制也不一样。

1.  在项目中，也就是src中使用环境变量的话，必须以`VUE_APP_`开头。例如我们可以在main.js中直接输出：`console.log(process.env.VUE_APP_XX)`
2.  在webpack配置中使用，没什么限制，可以直接通过`process.env.XXX`来使用
3.  在public/index.html中使用的：分三类：（没怎么用过）
    
        <%= VAR %> 用于非转换插值  例如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
           <%- VAR %> 用于HTML转义插值
           <% expression %> 用于JavaScript控制流    复制代码复制代码

有关环境变量的注意事项：

*  环境文件放置根目录下
 *  环境名应该与环境文件统一
 *  除了 baseUrl 和 NODE\_ENV 其他环境变量使用VUE\_APP开头

在项目的根目录新建4个文件夹，分别对应开发环境（.env.dev），测试环境（.env.test），预发布环境（.env.pre），生产环境（env.prod）

文件内容及字段说明

*  `NODE_ENV`:可以设置为其他值，比如"test",但是打包后的目录结构和"production"不一样，所以还是设置为"production",通过"VUE\_APP\_MODE"变量来区分环境
 *  `VUE_APP_MODE`:线上测试环境
 *  `VUE_APP_API_URL`:api调用地址
 *  `outputDir`:打包生成的文件夹名称，默认是'dist'

`.env.development`文件内容如下：

NODE_ENV = 'development'
    VUE_APP_CURRENTMODE = 'dev'
    VUE_APP_BASEURL = '本地开发api地址'复制代码复制代码

.env.test文件内容如下：

NODE_ENV = 'test'
    VUE_APP_CURRENTMODE = 'test'
    VUE_APP_BASEURL = '测试环境api地址'复制代码复制代码

env.pre-release文件内容如下：

NODE_ENV = 'pre-release'
    VUE_APP_CURRENTMODE = 'pre'
    VUE_APP_BASEURL = '预发布环境api地址'复制代码复制代码

env.production文件内容如下：

NODE_ENV = 'production'
    VUE_APP_CURRENTMODE = 'prod'
    VUE_APP_BASEURL = '正式环境api地址'复制代码复制代码

package.json配置：

"scripts": {
            "dev": "vue-cli-service serve",
            "build:test": "vue-cli-service build --mode test",
            "build:per": "vue-cli-service build --mode pre-release",
            "build:prod": "vue-cli-service build --mode production",
            "build": "vue-cli-service build",
            "lint": "vue-cli-service lint"
        },复制代码复制代码

最后根据上面的配置进行打包：

npm run dev //本地运行npm run build:test //测试环境打包npm run build:pre //预测试环境打包npm run build:prod //正式环境打包复制代码复制代码

**注意：**

在vue.config.js使用`process.env.[name]`进行访问就可以了 ，其中name就是不同环境配置中的变量

// vue.config.js
    console.log(process.env.NODE_ENV); // development（在终端输出）复制代码复制代码

当你运行 npm run dev命令后会发现输出的是 development，因为 vue-cli-service serve 命令默认设置的环境是 development，你可以修改 package.json 中的 dev 脚本的命令为：

"scripts": {
    "dev": "vue-cli-service serve --mode test",
    }
    // --mode test其实就是修改了 webpack 4 中的 mode 配置项为 test，同时其会读取对应 .env.[model]文件下的配置 
    // 如果没找到对应配置文件，其会使用默认环境 development
    // 同样 vue-cli-service build 会使用默认环境 production

作者：haona  
链接：https://juejin.cn/post/6844904130209644551  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[https_juejin.cn_post_6844904130209644551]: https://juejin.cn/post/6844904130209644551
[http_www.manongjc.com_detail_18-xghadafkocxrqoa.html]: http://www.manongjc.com/detail/18-xghadafkocxrqoa.html