Vue2项目配置@指向src路径
这样配置的好处：
1 简写路径 避免使用相对路径时层次混乱导致书写错误
2 方便移动文件
1找到项目的 vue.config.js 文件
2 这里的配置
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,// 关闭Eslint语法检查
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
},
},
})3 配置好之后重新运行项目就可以使用@符
import '@/style/sass/global.scss' // global cssVue配置根目录（用@代替src）
今天发现了一个项目中的路径中有@
比如：
import { getList } from '@/api/table'又或者
import router from '@/router'学识尚浅的我就看不懂了，但是懵懵懂懂又觉得肯定是哪里配置过了，@肯定是代替了路径的一些东西
知识点
其实多看几个文件就会发现了，@代替了src目录
看出来代替了什么其实不难，难点主要是怎么去配置它
配置
1、如果path模块，则先需要npm引入
npm install path --save2、配置jsconfig.js
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}3、配置vue.config.js
方法一：（我看的项目用的）
// 配置configureWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
configureWebpack: {
name: 'vue Element Admin',
resolve: {
alias: {
'@': resolve('src')
}
}
}
}方法二：
// 配置chainWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
