【Vue】最近项目中使用到的 Vue.config.js 配置项的简单介绍
<p>在开始之前，有必要说明一下，Vue CLI 本身是有很完善的中文文档的，绝大多数的配置项都可以在<ahref="https://cli.vuejs.org/zh/config/#vue-config-js">官方文档</a>中找到，这篇文章里只是一些个人的简单理解。</p><h2>transpileDependencies</h2><p>是否要使用 <code>babel</code> 转义 <code>node_modules</code> 中的依赖们。建议设置为 <code>true</code>，否则如果你依赖的 <code>node_modules</code> 中使用了 ES6 的语法，可能会导致你的应用无法正确运行在过时的浏览器中。<br>过时的浏览器的占有率其实比我们想象中的大一些，例如微信小程序在 iOS 系统下的 webview，它就是不支持 ES6 语法的。 <br>有些小伙伴发现自己的应用直接在微信访问时完全正常，但是嵌入 iOS 微信小程序的 webview 后，就无法正常工作，究其原因，就在于此了。<br>另外还有一个在官方文档中提到过的内容，如果你的依赖非常的多，简单的将其设置为 <code>true</code> 将会影响你的应用打包速度，如果你比较在意这一部分内容，那么可以传入一个需要转义的模块名的数组作为它的值，这样它就只会转义这个数组内的模块了。</p><h2>outputDir</h2><p>很常用的一个选项，决定了打包输出的文件夹位置，绝大多数情况，我们可能都会想要直接把打包结果输出到我们 web 服务器的目录下，而我们的 vue 源码自然不会放到 web 服务器的目录中，那么设置它就是一个很好的解决方案。<br>当然，你也可以不修改这个值，让它保持默认，然后在通过 jenkins 之类的 CI 工具，在打包完成后，复制打包完成的文件到你的 web 服务器指定目录。</p><h2>publicPath</h2><p>比较常用的应用场景，就是当你的网站需要部署在非根目录下的时候使用，这一部分文档的说明已经相当完整详细了，我这里就不画蛇添足了。</p><h2>pages</h2><p>从官方文档来看，它其实是用于多页面应用的(不再赘述)，不过我这里的单页应用还是用到了，我只是拿它来修改入口文件和模板的路径:</p><pre><code class="lang-js">module.exports = defineConfig({pages: {
index: {
entry: './h5/main.js', // 修改入口文件地址
template: './h5/index.html', // 修改 html 模板地址
filename: 'index.html', // 其实是默认值，可以不加，放在这里只是方便理解
},
},
});</code></pre><p>想要实现同样的效果，还有另一种修改方式，那就是使用 <code>chainWebpack</code>，写法如下:</p><pre><code class="lang-js">module.exports = defineConfig({
indexPath: 'index.html', // 其实是默认值，可以不加，放在这里只是方便理解
chainWebpack: config => {
config.plugin('html').tap(configs => {
configs.template = './h5/index.html'; // 修改 html 模板地址
return configs;
});
config.entry('app').clear().add('./h5/main.js'); // 修改入口文件地址
},
});</code></pre><p>这两种写法，本质上都是在影响 html-webpack-plugin 的配置，具体要使用哪个，就见仁见智了。</p><h2>devServer</h2><p>这里是要配置一下你的本地服务器，一般来说，前后端分离的应用，都可能存在跨域的问题，而我们一般会将允许的域名作为白名单列入后台的跨域访问控制中，所以我们的 devServer 如果想要正常请求到测试环境的服务器，本地的仍然是 localhost 就不是很合理了。</p><pre><code class="lang-js">module.exports = defineConfig({
devServer: {
allowedHosts: [ // 修改一下允许的本地域名，如果使用不在这个列表的域名访问 devServer，会被拒绝。
'local.ma-zhe.com'
],
https: true, // 是否开启 https，建议开启，很多 cookie 都是 secure 的了，不支持在 http 下访问（至于证书，其实没关系，毕竟这是你本地访问，无视浏览器的警告点个继续就是了）
open: true, // 是否在 devServer 启动之后自动打开，建议开启，不然你还要自己拼 URL 打开。
host: 'local.ma-zhe.com', // host
port: '8801', // devServer 所在的端口
},
});</code></pre><h2>结语</h2><p>感谢您的观看，暂时就这么多了，再见。</p>
<div class="post-copyright">
<div class="alert" role="alert">最后编辑时间为: September 4th , 2022 at 12:01 am<br>本文由 <ahref="https://ma-zhe.com/index.php/author/1/">Warren Ma</a> 创作，采用 <ahref="https://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0</a> 国际许可协议进行许可<br>可自由转载、引用，但需署名作者且注明文章出处</div>
</div>
<div class="post-tags"></div>
页:
[1]