vue項(xiàng)目開發(fā)時(shí)一般用相對(duì)路徑吗伤，但是如果文件位置發(fā)生變動(dòng)燎潮，需要重新設(shè)置路徑，為了解決這個(gè)問題郊酒，直接通過修改vue-cli的webpack配置，進(jìn)行別名的設(shè)置
參考官方文檔
- vue-cli官方文檔webpack相關(guān)
- image.png
實(shí)現(xiàn)方案
- 新建vue.config.js文件
// vue.config.js
const path = require('path')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
} else {
// 為開發(fā)環(huán)境修改配置...
return {
resolve: {
alias: {
'@js': path.resolve(__dirname, './src/assets/js'),
'@css': path.resolve(__dirname, './src/assets/css'),
'@img': path.resolve(__dirname, './src/assets/imgs'),
'@c': path.resolve(__dirname, './src/components'),
}
}
}
}
}
}
- 用別名替換相對(duì)路徑
// old
import './assets/js/htmlFontSize';
// new
import '@js/htmlFontSize.js';
