买个萝卜 2019-09-29 11:23 采纳率: 0%
浏览 1347

vue-cli3.0使用prerender-spa-plugin插件预渲染时 publicpath的配置问题

按照网上搜寻到的办法 配置预渲染 :

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

  • 写回答

1条回答 默认 最新

  • dabocaiqq 2019-09-29 23:52
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 MATLAB怎么通过柱坐标变换画开口是圆形的旋转抛物面?
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿