Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象。
Vue CLI 内部的 webpack 配置是通过 webpack-chain (链式操作)维护的。这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改。
它允许我们更细粒度的控制其内部配置。接下来有一个在 vue.config.js
中的 chainWebpack修改的例子。
// 直接引用node中自带的模块
const path = require('path');
// __dirname 总是指向被执行 js 文件的绝对路径,也就是说你在E:\web\test\vue.config.js中写__dirname那么路径就是E:\web\test
function resolve (dir) {
// 例如path.join(__dirname,'src')输出 E:\web\test\src
return path.join(__dirname, dir) } module.exports = {
// 设置代理 devServer: { port: 8080, proxy: { "/gateway": { target: "http://aaa.com/", changeOrigin: true,
pathRewrite: { "^/app/": "/app/" } } } },
// 设置是否在开发环境下每次保存代码时都启用eslint
验证。
// true 开启每次保存都进行检测,效果与warning一样
lintOnSave: true, chainWebpack: config => { config.resolve.alias .set("home", resolve("src/views/home")) .set("utils", resolve("src/utils")) } };
官方的文档中写到:
配置 resolve 别名
config.resolve.alias : ChainedMap
config.resolve.alias
.set(key, value)
.set(key, value)
.delete(key)
.clear()
resolve的的一个属性alias(别名)。
在这里,我们在全局配只一个别名,这样我们在其它地方在调用home目录里的文件时,我们就可以省下一些路径,直接用home代替就好啦例如
例如下面的图片是我的src下面的目录
这里是我router.js的引用。
是不是 看起来就方便了很多呢!
以上就是我的理解,希望大家多多提出意见!