Vue2如何配置@指向src路徑

這篇文章主要介紹“Vue2如何配置@指向src路徑”，在日常操作中，相信很多人在Vue2如何配置@指向src路徑問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue2如何配置@指向src路徑”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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'))
    }
}

到此，關于“Vue2如何配置@指向src路徑”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！