m0_61469275 2022-10-06 21:35 采纳率: 30.8%
浏览 76
已结题

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条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

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

      悬赏问题

      • ¥15 使用scrapy中间件+selenium爬取新浪新闻数据
      • ¥15 程序设计:食堂菜品管理系统
      • ¥15 1920的分辨率,但浏览器却显示1600*900像素
      • ¥15 数学模型来预测国民生产总值,matlab
      • ¥35 dvwa里sql注入无返回结果
      • ¥30 关于electron调用C库出现的问题!
      • ¥15 编译报错,程序没有语法问题
      • ¥15 (微机原理)若用1K×8位的芯片,构成一个4KB的RAM,请用全译码的方式设计最大模式下的8086电路系统。
      • ¥15 这两个题二选一,用java,最好是elipse这个软件运行的
      • ¥20 Ubuntu20.10安装gcc报错