Vue项目中配置路径别名以及使用技巧

2023-03-21 16:06| 来源: 网络整理| 查看: 265

路径别名配置

使用vue-cli 2.0的可以直接在vue.config.js中配置，如果使用vue-cli 3.0 由于在3.0版本则需要手动自行创建vue.config.js文件，下面为配置别名的vue.config.js文件的完整代码

const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src')) .set("@api", resolve("src/api")) .set('@img',resolve('src/assets/img')) .set('@components',resolve('src/components')) }, } 复制代码使用技巧和注意事项在Css中使用

在Css中使用别名需要在别名前加前缀~来避免歧义。

如：

.main-box{ background: url("~@img/bg-img.png"); } 复制代码

由于如果 URL 以~开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：

复制代码路径提示

如果你Vscode中安装了Path Intellisense路径提示插件，会发现使用路径别名后没有路径提示了，只需要在jsconfig.json文件中配置即可，如果项目中没有这个文件需要我们手动添加，创建时需要注意是和src同级。下面是配置的完整代码。最重要的是paths字段，其他字段是一些个性化配置，不影响路径别名的路径提示。

{ "include": [ // 需要JavaScript语言服务将分析哪些文件 "./src/*" ], "compilerOptions": { "target": "ES6", // 指定要使用的默认库 "module": "commonjs", // 在生成模块代码时指定模块系统 "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块进行默认导入。这不会影响代码发出，只需进行类型检查 "baseUrl": "./", // 用于解析非相对模块名称的基目录 "paths": { // 指定要相对于 baseUrl 选项计算的路径映射（在项目中配置的路径别名的映射） "@/*": ["src/*"], "@api/*": ["src/api/*"], "@img/*": ["src/assets/img/*"], "@components/*": ["src/components/*"], } }, } 复制代码

这样配置好以后再用路径别名编写路径的时候就会有对应的路径提示啦！

【本文地址】

公司简介

联系我们