webpack打包vue文件报错：ERROR in ./src/App.vue 1:0 Module parse failed: Unexpected token (1:0) You may need

最新推荐文章于 2023-04-16 20:45:46 发布

小王_同学

最新推荐文章于 2023-04-16 20:45:46 发布

阅读量1.2w

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue webpack

本文链接：https://blog.youkuaiyun.com/weixin_38866493/article/details/89188890

本文详细介绍了解决Webpack无法直接处理Vue文件的问题方法。通过安装并配置'vue-loader'和'vue-template-compiler'插件，使Webpack能够正确解析和打包.vue文件。针对特定版本的vue-router可能引发的错误，提供了额外的配置建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack默认不能处理vue文件，只能自己添加额外的插件进行处理

解决报错如下：
安装两个拓展插件

npm i vue-loader vue-template-compiler -D

然后在webpack.config.js添加如下配置：

 module: {
        rules: [
            { test:/\.vue$/, loader: 'vue-loader' }   
        ]
    }

如果仍然报错
可能是由于vue-router版本是15以上引起的
需要再额外添加如下配置
webpack.config.js文件：

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports  = {
    plugins: [   //配置插件的节点，所有插件都要在这里配置
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            { test:/\.vue$/, loader: 'vue-loader' }  
        ]
    }
};