Vue项目识别不到@别名问题及解决

2023-10-13 10:13:34 作者：两岁半

这篇文章主要介绍了Vue项目识别不到@别名问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue项目识别不到@别名

1、Vue项目创建好之后，打开文件总看见引入文件的位置有这样的波浪线，

虽然不影响功能，但看着难受，对于我这种强迫症来说一定要解决掉。

2、找到Ctrl+Alt+S打开设置菜单，找到Webpack选项：

3、将路径指向自己项目的build目录下的webpack配置文件：

@在vue可以当做路径的根目录来使用，不必再’./'或者‘…/’(两个点，markdown自动加了一个点)来利用同级目录和父级目录的方式去找路径了，更加方便。

而在vue使用@时必须先要进行配置，这里在webpack中配置：

找到vue中webpack.config.js文件，然后找到module.exports的resolve，最后在resolve中编辑代码：

resolve: {
     extensions: ['*', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
       '@': path.resolve('src'),
    },

之前网上有人也有相同的博客，不过在使用resolve时前面没有path，便会报错。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。