vue区分环境打包

背景:在需求开发完成后,需要打包发布测试环境,测试通过后,发布正式环境上线;

         在此流程中,涉及到图片、字体文件存放的oss地址,在测试环境使用测试环境的oss地址,正式环境使用正式环境的oss地址

         我们每次build都去手动更改oss地址,很麻烦。。。

有vue项目开发经验的小伙伴,多多少少都有点了解env(环境变量),此次我们就从这里着手

env官方文档介绍:

https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

https://cli.vuejs.org/zh/guide/mode-and-env.html#using-env-variables-in-client-side-code

模式

默认情况下,一个 Vue CLI 项目有三个模式

  • development 模式用于 vue-cli-service serve
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式用于 vue-cli-service test:unit

环境文件

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入,比.env优先级高
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

环境变量

在环境文件中以“键=值”对形式存在的叫环境变量

被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。

环境变量会随着构建打包嵌入到输出代码,意味着任何人都有机会能够看到它。

可以在vue.config.js或者其他地方使用process.env访问,例如:process.env.NODE_ENV

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

目前我需要本地开发环境,测试环境,生产环境,而本地开发环境和测试环境都使用测试环境的oss地址,所以我只需要两套环境

由上述 .env 的文件在所有环境都会载入,故 npm run server(本地开发) 和 npm run build(测试环境)都可以使用 .env 里的环境变量

只需要再新增一个 .env.beta 设置正式环境的环境变量

第一步:在与package.json同级目录下创建 .env 和 .env.beta 文件

第二步:为.env 和 .env.beta 环境文件添加环境变量

根据vue-cli3文档,环境变量需要以 VUE_APP_ 开头  

请注意,只有 NODE_ENVBASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端代码中。

第三部:配置package.json文件,创建打包命令,指定模式

第四部:环境变量的使用

  1. 在项目中,也就是src中使用环境变量的话,必须以VUE_APP_开头。例如我们可以在main.js中直接输出:console.log(process.env.VUE_APP_SECRET)
  2. 在webpack配置中使用,没什么限制,可以直接通过process.env.XXX来使用
  3. 在public/index.html中使用的:分三类:(没怎么用过)

       <%= VAR %> 用于非转换插值  例如:`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
       <%- VAR %> 用于HTML转义插值
       <% expression %> 用于JavaScript控制流    

注意:

   NODE_ENV - 会是 "development""production" 或 "test" 中的一个。具体的值取决于应用运行的模式,

  NODE_ENV 也决定了创建哪种 webpack 配置,因此轻易不要修改NODE_ENV值,可通过增加一个环境变量来区分自定义的模式

   比如上文新增的 process.env.VUE_APP_MODE   来判断是线上生产环境还是线上测试环境

    webpack根据development、production、test做了一些处理

  比如:

   1、vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

      2、在 development 模式中,附带模块热更新,不会对资源进行 hash 也不会打出 vendor bundles,目的是为了在开发的时候能够快速重新构建。

     3、在 test 模式,Vue CLI 会创建一个优化过后的,并且旨在用于单元测试的 webpack 配置,它并不会处理图片以及一些对单元测试非必需的其他资源。

     4、当你运行 vue-cli-service build 命令时,无论你要部署到哪个环境,应该始终把 NODE_ENV 设置为 "production" 来获取可用于部署的应用程序

        (带有 JS/CSS/HTML 的压缩,和为更好的缓存而做的自动的 vendor chunk splitting)

原文地址:https://www.cnblogs.com/caofeng11/p/14066355.html