问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用html-webpack-plugin输出html文件，但是输出的html是中body内的元素全是空

头像
枫s的思念
    2.4k102639

    使用webpack打包vue文件的时候，使用html-webpack-plugin，index.html在输出后body内的元素变为空

    input

        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="icon" href="static/pic/logo.png" type="image/x-icon">
        <link rel="stylesheet" href="static/weui/weui.min.css">
        <link rel="stylesheet" href="static/index.css">
        <title>APP</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="./dist/vendor.js"></script>
        <script src="./dist/app.js"></script>
    </body>
    </html>

    output

        <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>SPA</title>
      <link href="/dist/style.df241090c6a9e0a6bf26.css" rel="stylesheet"></head>
      <body>
      <script type="text/javascript" src="/dist/vendor.df241090c6a9e0a6bf26.js"></script><script type="text/javascript" src="/dist/app.df241090c6a9e0a6bf26.js"></script></body>
    </html>

    html-webpack-plugin config

        const htmlWebpackPlugin = require('html-webpack-plugin');
    
        plugins: [
            new htmlWebpackPlugin({
                title:'SPA',
                filename: 'assets/index.html'
            })
        ],
    webpacknode.jsvue.js
    阅读 6k
    1 个回答
    得票最新
    头像
    F_意志力
      817119

      楼主配置貌似缺少了点

      let conf = {
        filename: '', // 生成的html存放路径，相对于publicPath
        template: '', // html模板路径,
        inject: 'body', //js插入的位置，true/'head'/'body'/false
        minify: { //压缩HTML文件
            removeComments: true, //移除HTML中的注释
            collapseWhitespace: true, //删除空白符与换行符
            // 为了使GAEA能正确识别script, 保留引号
            // removeAttributeQuotes: true,
            minifyJS: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true
        }

      如果楼主想用模板的话,要指明templatePath的位置

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题