vue使用@路徑引入，vue.config.js配置

項目中使用引入文件有時候路徑比較深，需要使用"../../../xx.js"這種類似的路勁引入，這種方式比較笨，可以使用webpack的別名alias配置來解決。

首先，先確定項目中是否有path模塊：

如果沒有path模塊需要先安裝path

npm  install  path  --save

 

 以下為vue.config.js配置

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("base", resolve("baseConfig"))
      .set("public", resolve("public"));
  },
}

　　

之前寫法

 
          這個@是在 webpack.base.conf.js 文件里配置的，找到下面這段話 
           resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
 'vue$': 'vue/dist/勝利ue.esm.js',
 '@': resolve('src'),
 }
 }, 
         

 

vue cli 文檔：https://cli.vuejs.org/zh/config/#configurewebpack

 

轉：https://www.cnblogs.com/skylineStar/p/10282347.html