vue cli的template模板内，如何引入公共模板？

Question

vue cli的template模板内，如何引入公共模板？

flamesnow

61621

发布于
2022-07-26

更新于
2022-07-26

通过vue cli构建的项目，我想在“图中红框”处引入一个包含了html的外部文件（以此来解决多页面时，对公共代码进行提取），该如何配置？

解决方案

vue.config.js

const fs = require('fs')
const header = fs.readFileSync('./public/header.html').toString()

module.exports = {
    runtimeCompiler: true,
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true
                }
            }
        }
    },
    chainWebpack: (config) => {
        config.plugin('html').tap((args) => {
            args[0].header = header

            return args
        })
    }
}

/public/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>test</title>
    <script>
    </script>
</head>
<body>
    <%= htmlWebpackPlugin.options.header %>
    <div id="app"></div>
</body>

</html>

javascript html vue.js

阅读 1.9k

1 个回答

得票最新

643104191

2.5k21137

发布于
2022-07-26

✓ 已被采纳

那就是模板文件也需要进行模块化了,
你可能需要对html-webpack-plugin进行配置,用这个插件来写你的"公共模板"

撰写回答