webpack更新记录，vue-loader报错Compiled with problems : ERRORModule notfound: Error:Can‘ t resolve vue in

最新推荐文章于 2024-04-12 17:49:07 发布

Heigl swift

最新推荐文章于 2024-04-12 17:49:07 发布

阅读量1.4w

点赞数 2

文章标签： 1024程序员节 webpack vue.js

本文链接：https://blog.youkuaiyun.com/helgeal/article/details/120941281

版权

博客讲述了在package.json中遇到的Webpack构建问题，包括`webpack-p`指令的弃用和css-loader的更新。作者指出，新的css-loader不再支持内联URL，但可以通过配置恢复。同时，Vue-loader的配置需要vue-template-compiler，不匹配的版本导致了错误。解决办法是确保vue-template-compiler与Vue版本一致。

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

在package.json包中

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open",
        "bulid": "webpack -p"
    },

"bulid": "webpack -p" -p 指令不在能被识别，已经被淘汰了。更改为：

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open",
        "bulid": "webpack"
    },

css-loader更新

老版中css-loader是不能识别url地址的需要另外url-loader，显得繁琐,但是它可以自动生成base64 格式的图片以减轻服务器的压力，新版是直接支持url的解析的但很明显事情了这种功能，当然也可以配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

禁用url,但配置之后似乎会导致css属性和id选择器用不了；

vue-loader配置时碰到了很大的阻碍

vue-loader使用是必须下载vue-template-compiler以解析vue文件

配置选项：

const VueLoaderPlugin = require('vue-loader/lib/plugin');//必须导入
module.exports = {

     module: {
        rules: [
            { test: /\.vue/, use: ['vue-loader'] }
        ]
    },
    plugins: [new VueLoaderPlugin()]//必须配置
}

但是我配置之后出现了问题

网上的种种方法统统无效，最终是发现没有安装vue

npm i vue

安装之后也出现了问题依旧报错

最后看到了 vue-template-compiler与vue的版本号不同，更新了 vue-template-compiler之后才最终解决了问题