webpack打包不识别template标签

最新推荐文章于 2024-08-07 15:52:36 发布

mmjinglin

最新推荐文章于 2024-08-07 15:52:36 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 webpack 文章标签： webpack4 vue2

本文链接：https://blog.youkuaiyun.com/mmjinglin/article/details/86576804

前端同时被 2 个专栏收录

44 篇文章

订阅专栏

webpack

4 篇文章

订阅专栏

本文详细解析了在webpack配置中，使用vue-loader处理.vue文件时常见的错误及其正确写法。指出将'loader'属性更改为'use'属性的重要性，并提供正确的模块配置示例。

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

在这里插入图片描述

错误原因：

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

正确写法：

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mmjinglin

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端领域Webpack的打包过程中的错误排查

AI架构全栈开发实战笔记

04-09

838

本文旨在为前端开发者提供一套完整的Webpack打包错误排查方法论。Webpack核心工作机制解析常见打包错误分类体系模块解析失败的根本原因Loader和Plugin配置陷阱性能瓶颈识别与优化高级调试技巧和工具链第2章解析Webpack核心概念，建立理论基础第3章详细拆解打包流程中的关键算法第4章提供数学模型帮助理解模块解析机制第5章通过实际案例演示错误排查过程第6-7章提供实用工具和资源推荐第8章展望未来发展趋势Entry。

webpack 打包ts

x94410891的博客

07-01

597

当我们单纯用ts开发一个公有库时，没有了脚手架的帮助，我们需要借助webpack完成该ts项目的打包 1.初始化 npm init -y 2.自动生成webpack.config.js文件 tsc --init 3.安装ts npm install -D typescript 4.安装 npm install -D webpack@4.41.5 npm install -D webpack-cli@3.3.10 npm install -D webpack -dev-server@3.10.2

1 条评论您还未登录，请先登录后发表或查看评论

arttemplate与webpack的应用

weixin_30876945的博客

02-27

193

模板渲染使用arttemplate，使用方法如下：普通使用普通使用把渲染模板写在<script>标签里面，引入arttemplate.js，从服务端接收数据（数组与对象的形式），然后调用arttemplate提供的方法渲染。例如，可以直接调用template()方法（需要获取html标签的id）；或者使用complie()先编译模板，然后再传入数据；或者使用render()方...

webpack 引入art-template 的方法

github_37360787的博客

07-27

2022

安装依赖包： npm install art-template --save npm install art-template-loader --save-dev config.js配置： rules: [ { test: /\.art$/, loader: "art-template-loader", ...

webpacke4 模板以及踩坑指南

Amber的博客

01-14

440

scss、webpack-dev-server https://github.com/AmberAAA/webpack-template

0-1 使用Vue Loader 结合webpack自己创建vue脚手架解决template报错render函数

weixin_45441173的博客

03-01

1258

0-1 使用Vue Loader 结合webpack自己创建vue脚手架解决template报错render函数

webpack打包的react案例demo.rar

06-13

在本文中，我们将深入探讨如何使用Webpack打包React应用，基于提供的"webpack打包的react案例demo.rar"。这个压缩包包含了经过Webpack打包后的项目文件（dist）以及开发过程中所需的依赖库（node_modules）。让我们...

webpack-preact-template：Preact + Webpack的模板。运行`npx degit shffwebpack-preact-template`以使用它

02-11

综上所述，`webpack-preact-template` 是一个结合了 Webpack 的强大打包功能和 Preact 的高效开发体验的项目模板。通过运行 `npx degit shffwebpack-preact-template` 命令，开发者能够迅速开始一个基于最新前端技术...

Webpack打包CSS图片，HTML图片，JS图片

weixin_46273011的博客

04-05

846

CSS图片打包图片如果是通过网址，服务器上的，那么webpack可以则跳过，不需要去被识别。包和环境配置跟上篇的CSS打包一样但是如果是本地图片，那么需要识别，这时候要借助loader 安装包 file-loader npm install --save-dev file-loader@6.0.0 所有包情况package.json { "name": "webpack-js-img", "version": "1.0.0", "description": "", "m.

项目 webpack

最新发布

m0_45116831的博客

08-07

1075

每个 vue 包的新版本发布时，一个相应的 vue-template-compiler 也会随之发布。编译器的版本必须和基本的 vue 包保持同步，这样 vue-loader。这意味着你每次升级项目的 vue 包时，也应该匹配升级 vue-template-compiler。CopyPlugin的作用是，帮助开发人员在构建过程中将静态文件（如图片、字体等）直接复制到输出目录，而无需经过任何处理。vue-template-compiler 需要独立安装的原因是你可以单独指定版本。

vscode 对template 标签失效的问题

Soup's Blog

12-31

2950

问题解决办法（1）可以安装vetur 插件，点Install 效果我的情况是这样，如果还是不可以的话，可以百度搜索试试其他方法。

vue - template标签兼容问题

weixin_30767921的博客

11-14

678

在使用vue的过程中，因为使用到了template标签，在低版本系统上直接显示出来模板源码，经分析可能不兼容此html5标签，故换成以下方式来解决此问题将<template>...</template> 改为 <script type="text/x-template">...</script> 转载于:https://...

template模板找不到

ankao9532的博客

05-23

1598

springboot启动时报WARN的警告，报错内容：Cannot find template location: classpath:/templates/ (please add some templates or check your Thymeleaf configuration) 启动之后，执行访问报错。上网找了解决方案 <resource> ...

前端笔记-对webpack和vue的基本认识

IT1995的博客

08-05

4699

目录基本概念代码与实例个人理解基本概念现在的前端和后端都是通过api获取数据的。这里主要有这几条命令： npm i webpack vue vue-loader npm i css-loader vue-template-compiler 这里，就是使用了webpack和vue以及vue-loader 下面那一行是他的依赖。这里看以下vue的文...

webpack对html模版的处理

周家大小姐

03-16

1万+

1.首先我们要加公共的base.js加载进来; 现把公共的css加载进来在浏览中打开;发现成功加载加载进来其实并不是正直的解决问题 ;问题是在于;我们的html是在我们定义的文件夹下;并不是在dist下: 我们发布的时候只会发dist;还有就是如果那么多版本,不可能每个版本都手写 <link rel="stylesheet" href="../../dist/css/...

webpack 打包时安装的模版不兼容问题

scorpio_meng的博客

11-11

1760

1，webpack一入手就踩坑，打包时，各种报错，代码检查后正常，安装模版的时候都是最新版本，但是各模板最新的版本之间兼容却有问题，必须将某些模板降低版本。当时安装的最新版本如下图 2，npm run dev 后，先是报了 babel 的错误 “ Error: Cannot find module '@babel/core' ”，错误信息还算详细，直接说了babel-loader要换成7的...

vue-cli的webpack模板项目配置文件分析