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

项目中使用引入文件有时候路径比较深，需要使用"../../../xx.js"这种类似的路劲引入，这种方式比较笨，可以使用webpack的别名alias配置来解决。

首先，先确定项目中是否有path模块：

如果没有path模块需要先安装path

npm  install  path  --save

 

 以下为vue.config.js配置

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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