Vue2專案設定@指向src路徑方式

2022-12-09 14:02:38

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。