按照网上搜寻到的办法 配置预渲染 :
vue.config.js:
// 这三项一定要有,因为下面configureWebpack中用到了
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
// 预渲染关键配置
configureWebpack: () => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, 'dist'),
// 对应自己的路由文件,如果有参数需要写具体参数,比如/a/:id需要写/a/123456
routes: ['/', '/about'],
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
]
};
}
};
修改成自己的:
1.添加
publicPath: process.env.NODE_ENV === 'production' ? '/fish/' : '/',
outputDir: 'fish',
2.修改:
staticDir: path.join(__dirname, 'fish'),
最终修改后**vue.config.js**:
// 这三项一定要有,因为下面configureWebpack中用到了
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/fish/' : '/',
outputDir: 'fish',
// 预渲染关键配置
configureWebpack: () => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, 'fish'),
// 对应自己的路由文件,如果有参数需要写具体参数,比如/a/:id需要写/a/123456
routes: ['/', '/about'],
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
]
};
}
};
3.问题出现:
配置了publicPath后,进行打包编译时就会一直卡住不动,编译时弹出的浏览器一直白屏
求教如何正确配置 publicPath