vue CLI 高级

相关: webpack 相关配置

打包优化

环境变量

---

只在本地有效的变量

有的时候你可能有一些不应该提交到代码仓库中的变量，尤其是当你的项目托管在公共仓库时。这种情况下你应该使用一个 .env.local 文件取而代之。本地环境文件默认会被忽略，且出现在 .gitignore 中。

.local 也可以加在指定模式的环境文件上，比如 .env.development.local 将会在 development 模式下被载入，且被 git 忽略。

一个环境文件只包含环境变量的“键=值”对：

FOO=bar

VUE_APP_NOT_SECRET_CODE=some_value

在客户端代码中使用环境变量

只有以 VUEAPP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET);

但除了 VUEAPP* 变量之外，代码中始终还可以访问到，以下这两个变量：

• NODE_ENV - 会是  “development”、“production”  或  “test”  中的一个。具体的值取决于应用运行的模式。
• BASE_URL - 会和  vue.config.js  中的  publicPath  选项相符，即你的应用会部署到的基础路径。
  • 还可以用 插件  
  • 

配置环境 url  根路径下添加以下文件

.env.development (开发环境)代码如下：

VUE_APP_BASE_URL = '[http://www.development.com](http://www.development.com/)'

.env.test(测试环境)代码如下：

VUE_APP_BASE_URL = '[http://www.test.com](http://www.test.com/)'

.env.production(生产环境)代码如下：

VUE_APP_BASE_URL = '[http://www.productioon.com](http://www.productioon.com/)'

最后在代码中   可以使用 <font style="color:#E8323C;">process.env.VUE_APP_BASE_URL</font> 获取当前环境得 baseurl

—————

**链式操作 (高级)  **

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

它允许我们更细粒度的控制其内部配置。接下来有一些常见的在 vue.config.js 中的 chainWebpack 修改的例子。

提示

当你打算链式访问特定的 loader 时，vue inspect 会非常有帮助。

#修改 Loader 选项

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        // 修改它的选项...
        return options;
      });
  },
};

提示

对于 CSS 相关 loader 来说，我们推荐使用 css.loaderOptions 而不是直接链式指定 loader。这是因为每种 CSS 文件类型都有多个规则，而 css.loaderOptions 可以确保你通过一个地方影响所有的规则。

---