前端小白白啦 2022-10-06 21:35 采纳率: 39.4%
浏览 187
已结题

webpack 使用 vue-loader 打包 vue单文件时报错

webpack 使用 vue-loader 打包 vue单文件时报错

webpack vue vue-loader 相关版本

img

// 为了避免干扰删除了其他一部分代码
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { DefinePlugin } = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
// const  VueLoaderPlugin  = require('vue-loader/lib/style-compiler');
//  const  {VueLoaderPlugin}  = require('vue-loader/dist/index.js')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: "./src/main.js",
    output: {
        filename: "build.js",
        path: path.resolve(__dirname, "./build")
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2
                        }
                    },
                    "postcss-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
        ],
    },
    plugins: [
        new VueLoaderPlugin()
    ],
}

vue文件内容

<template>
  <div>123</div>
</template>

<script>
export default {

}
</script>


运行结果及报错内容

img

PS E:\webpack\webpacks-l> npm run build

zrs@1.0.0 build
webpack --config webpack.config.js

asset build.js 308 KiB [compared for emit] (name: main) 1 related asset
asset ./index2.html 338 bytes [compared for emit]
asset 1.txt 0 bytes [compared for emit] [from: copy/1.txt] [copied]
runtime modules 1.19 KiB 5 modules
cacheable modules 304 KiB
./src/main.js 134 bytes [built] [code generated]
./src/App.vue 39 bytes [built] [code generated] [1 error]
./node_modules/vue/dist/vue.runtime.esm.js 304 KiB [built] [code generated]

ERROR in ./src/App.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
at Object.loader (E:\webpack\webpacks-l\node_modules\vue-loader\dist\index.js:70:34)
@ ./src/main.js 2:0-28 5:13-16

webpack 5.74.0 compiled with 1 error in 1719 ms

我的解答思路和尝试过的方法

一。不导入vue文件 打包正常
二.降低vue-loader版本 打包报错

我想要达到的结果

正常打包
并且告知报错原因 以及解决办法

  • 写回答

2条回答 默认 最新

  • 游一游走一走 2022-10-06 21:49
    关注

    主要是你依赖的版本问题,修正可用后的依赖版本!【我建议学习时使用vue-cli脚手架生成项目减少入门时的难度,工作中更应该使用vue-cli生成项目框架,因为他们经过大量的测试和使用更稳定和靠谱】

    img


    错误原因,你的主线是vue是2.7.0,对应vue-template-compiler版本也是2.7.0,你就应该去找对应的版本的loader,17的版本是3.2+的

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月15日
  • 已采纳回答 10月7日
  • 修改了问题 10月6日
  • 创建了问题 10月6日

悬赏问题

  • ¥15 BDSBAS-B1C和B1C信号有什么不同
  • ¥15 在半圆平面内随机生成点坐标
  • ¥15 系统容量变化的几种多址方式TDMA, CDMA,FDMA,OFDMA 对比,应该给的是一个曲线 图,随着系统容量的增加,几种多址方式性能的对比 图,MATLAB程序仿真折线图
  • ¥15 用visual Studio 写c ++只运行上一个旧代码的运行结果是怎么回事
  • ¥15 系统容量变化的几种多址方式(TDMA,FDMA,OFDMA,CDMA)对比(相关搜索:曲线图)
  • ¥15 worldclim 历史及未来气候数据矫正
  • ¥15 ajax服务器不能下载
  • ¥15 运用c++和opencv实现二维码的识别和三维坐标的建立
  • ¥100 理想汽车的ADB为什么到了国外换了SIM就可以打开?
  • ¥15 k210烧入flash报错error:2005