主要是这两个包,实现静态化打包
require(‘prerender-spa-plugin’);
import MetaInfo from ‘vue-meta-info’
不足点:路由动态传值 ,请求api获取数据,不能打包出静态化,在路由组件创建前调用接口,并且数据绑定模版上可以打包静态结构代码,适用于宣传页项目开发,动态数据完全受限无法满足需求
prerender-spa-plugin使用注意⚠️ 在main.js 入口文件 创建Vue 添加
new Vue({
router,
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('custom-render-trigger'))
}
}).$mount('#app')
vue-meta-info 使用
//全局注册
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
路由组件使用
export default {
metaInfo: {
title: window.logoName + 'abort',
meta: [
{
name: 'keywords',
content: '关键字2,关键字2,关键字2'
},
{
name: 'description',
content: '这是一段网页的描述2'
}
]
},
data() {
return {},
},
created(){},
//...
webpack配置完整代码
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin')
// npm run build后,打开localhost:8888,项目结构
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const debug = process.env.NODE_ENV === "production"
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
lintOnSave: false,
runtimeCompiler: true, // 关键点在这
pluginOptions: {},
publicPath: "./", // ./改为/
outputDir: "server/dist",
// assetsDir: "static",
indexPath: "index.html",
productionSourceMap: false,
filenameHashing: true,
css: {
loaderOptions: {
sass: {
prependData: `@import "