Vue2项目配置@指向src路径方式

目录Vue2项目配置@指向src路径1找到项目的vue.config.js文件2这里的配置3配置好之后重新运行项目就可以使用@符Vue配置根目录（用@代替src）知识点配置总结Vue2项目配置...

目录

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 css

Vue配置根目录（用@代替src）

今天发现了一个项目中的路径中有@

比如：

import { getList } from '@/api/table'

又或者

import router from '@/router'

学识尚浅的我就看不懂了，但是懵懵懂懂又觉得肯定是哪里配置过了，@肯定是代替了路径的一些东西

知识点

其实多看几个文件就会发现了，@代替了src目录

看出来代替了什么其实不难，难点主要是怎么去配置它

配置

1、如果path模块，则先需要npm引入

npm install path --save

2、配置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'))
  }
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。