vue-cli 3+ツールで、パス別名(vue.config.js)を構成します.

6763 ワード

vue-cli 2.xバージョンでプロジェクトを作成する場合、buildフォルダの下にwebpackを見つけることができます.base.conf.jsファイル、resolveを変更します.aliasでいいです.
  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">