vue更新到3.0以后，在项目中已经深度集成了webpack，使用vue create命令新建项目之后，已经没有webpack配置文件了，这对于像小编这样没有系统学习过前端的同学来说，有点手足无措。
不过，好在浏览vue官方文档，发现vue作者预留了一个配置入口，那就是vue.config.js。此文件不会随项目一起创建，需要开发者手动去建立。
vue.config.js配置文件具体可以配置哪些东西，此处就不一一详解。请移步vue官方说明文档。
下面小编就针对如何在vue.config.js配置文件中配置项目路径别名，进行详细说明。
方法一
首先，项目中要引入path 模块。
如何查看项目中是否已经引入path模块？
浏览项目node_modules目录下是否存在path目录，如果存在，说明项目已经引入path模块，反之，则没有引入。
如何引入path模块？
在项目目录下，打开cmd命令提示符，使用npm install path –save
在项目目录下，新建vue.config.js文件，敲入一下代码。
const path = require('path');
// 如果编辑器启用了代码检查功能，此行代码在编辑器中会报警
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
lintOnSave: true,
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('src'))
// 需要重启 IDE
.set('styles',resolve('src/assets/styles'))
// 这里只写了两个个，你可以自己再加，按这种格式.set('', resolve(''))
}
};方法二【推荐】
在项目目录下，新建vue.config.js文件，敲入一下代码。
module.exports = {
configureWebpack: {
resolve: {
alias: {
assets: "@/assets",
components: "@/components",
views: "@/views"
}
}
}
};在这里解释一下，为什么小编推荐使用方法二设置路径别名。
方法一的首行代码在编辑器中会有报警现象，但不影响项目的编译运行，方法二不需要引入path模块，简单而又快捷。凡是入行经年的码农，多多少少会有一些代码洁癖，不愿意看到编辑器里有报警的出现，小编也不例外，甚至有些严重。针对“vue如何配置路径别名”这一问题，网上千篇一律都是使用方法一。发布这些文章的肯定都是为了浏览量，复制粘贴原创者的文章，没有经过亲自实践的。这可苦了像小编这样拥有代码洁癖症的码农啊。当然也有另一种方法，解决编辑器报警的现象。就是关闭eslint代码检查。但是，小编还是习惯打开代码检测，这样有利于小编写出更加规范的代码，个人习惯就好。
原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/vue/vue-config-alias.html
微信扫一扫 
支付宝扫一扫 
