在@vue/cli 5.0.8中怎么使用html-loader
时间: 2024-02-03 20:12:32 浏览: 121
前端html利用http-vue-loader以组件方式引入vue文件
在 Vue CLI 5.0.8 中使用 html-loader 需要进行以下步骤:
1. 安装 html-loader 和相应的依赖:
```
npm install --save-dev html-loader webpack webpack-cli
```
2. 在`vue.config.js`文件中配置 loader:
```javascript
module.exports = {
chainWebpack: (config) => {
config.module
.rule("html")
.test(/\.html$/)
.use("html-loader")
.loader("html-loader")
.end();
},
};
```
3. 在需要引用 HTML 文件的 Vue 组件中,使用`require`或`import`语句加载 HTML 文件:
```javascript
import myHtml from "./myHtml.html";
```
```javascript
const myHtml = require("./myHtml.html");
```
4. 在 Vue 组件中使用加载的 HTML 文件:
```javascript
<template>
<div v-html="myHtml"></div>
</template>
<script>
export default {
data() {
return {
myHtml: myHtml,
};
},
};
</script>
```
以上是使用 html-loader 的基本步骤,你可以根据具体的需求进行相应的配置。
阅读全文