vue-cli3+工具中，配置路径别名(vue.config.js)

最新推荐文章于 2024-09-10 14:43:41 发布

原创

最新推荐文章于 2024-09-10 14:43:41 发布 · 1.4k 阅读

12 ·

CC 4.0 BY-SA版权

本文介绍了在Vue CLI3中如何设置路径别名，由于Vue CLI3的目录结构变化，无法像2.x版本那样在webpack.base.conf.js中配置。解决方案是在项目根目录创建vue.config.js文件，并进行相关配置。配置完成后，重启项目，即可在引入文件时使用定义的别名，简化文件层级关系的处理。在HTML中引用别名时，别名前需添加符号。

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'),
    }
  },