vue-cli 3+ツールで、パス別名(vue.config.js)を構成します.
6763 ワード
vue-cli 2.xバージョンでプロジェクトを作成する場合、buildフォルダの下にwebpackを見つけることができます.base.conf.jsファイル、resolveを変更します.aliasでいいです.
しかし、vue-cli 3.0でプロジェクトを作成すると、ディレクトリ構造が簡素化され、buildフォルダとconfigフォルダが見つからない場合、パス別名をどのように変更すればいいのでしょうか.
プロジェクトのルートディレクトリの下でvueを新規作成するだけです.config.jsファイル、コードは以下の通りです.
使いたいパスエイリアスを設定した後、プロジェクトを再起動し、ファイルを導入するときは、エイリアスを使用してパスの前を設定します.
パスを設定した後(ファイルレベルの関係を心配する必要はありません):
なお、別名を参照する際にHTMLのパスであれば、別名の前に
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
しかし、vue-cli 3.0でプロジェクトを作成すると、ディレクトリ構造が簡素化され、buildフォルダとconfigフォルダが見つからない場合、パス別名をどのように変更すればいいのでしょうか.
プロジェクトのルートディレクトリの下でvueを新規作成するだけです.config.jsファイル、コードは以下の通りです.
const path = require('path');// path
function resolve(dir){
return path.join(__dirname,dir)//path.join(__dirname)
}
module.exports={
chainWebpack:(config)=>{
config.resolve.alias
//set : , :
.set('@',resolve('./src'))
.set('components',resolve('./src/components'))
.set('assets',resolve('./src/assets'))
.set('views',resolve('./src/views'))
.set('network',resolve('./src/network'))
// store router
}
}
使いたいパスエイリアスを設定した後、プロジェクトを再起動し、ファイルを導入するときは、エイリアスを使用してパスの前を設定します.
import my from "../views/my/My.vue";
パスを設定した後(ファイルレベルの関係を心配する必要はありません):
import my from "views/my/My.vue";
なお、別名を参照する際にHTMLのパスであれば、別名の前に
~
と符号を付ける必要がある <img src="~assets/img/tabbar/home.svg" alt="" slot="item-icon">