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

最新推荐文章于 2024-07-22 13:50:45 发布

厨樱

最新推荐文章于 2024-07-22 13:50:45 发布

阅读量2.1k

点赞数

分类专栏： vue 文章标签： vue.js webpack npm

原文链接：https://www.cnblogs.com/ygyy/p/12792545.html

版权

vue 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

该博客介绍了如何通过Webpack的alias配置来避免在项目中使用深层路径导入文件，提高代码可读性和维护性。通过设置如'@'、'assets'等别名，可以更方便地引用src目录下的资源。示例展示了在vue.config.js中配置alias的方法，并对比了未使用alias前的导入方式。

摘要由CSDN通过智能技术生成

项目中使用引入文件有时候路径比较深，需要使用"../../../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'),
}
},