vue入口html在哪配置,vue3.0项目如何配置路径别名

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，如若转载，请注明出处：http://www.uihtml.cn/course/vue/vue-config-alias.html