vue 使用 prerender-spa-plugin 预处理 seo优化 导致 history模式 页面刷新 文件加载404 问题

问题描述

nginx已经加了

    location / {
    
    
      try_files $uri $uri/ /index.html;
    }

没有使用prerender-spa-plugin插件之前history正常，增加插件后刷新文件加载异常

1.vue.config文件

/*
 * @Descripttion:
 * @version:
 * @Author: HHH
 * @Date: 2020-04-27 10:10:18
 * @LastEditors: HHH
 * @LastEditTime: 2020-12-22 19:09:39
 */
// const webpack = require("webpack");
// const path = require("path");

// function resolve(dir) {
    
    
//   return path.join(__dirname, dir);
// }
// gzip压缩插件
const path = require("path");
const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const devFlag = process.env.NODE_ENV === "development";
// vue.config.js
module.exports = {
    
    
  publicPath: "/",
  productionSourceMap: process.env.NODE_ENV === "production" ? false : true,
  // publicPath: process.env.NODE_ENV === "production" ? "./" : "/", //部署服务器时注释  本地查看dist 打开注释 否则 history 服务器部署 文件根目录 是相对路径 ./ 子路由报404
  transpileDependencies: ["webpack-dev-server/client"],
  // 选项...
  devServer: {
    
    
    port: 8088,
    disableHostCheck: true,
    // historyApiFallback: true,
    // hot: true,
    // inline: true,
    // stats: { colors: true },
    proxy: {
    
    
      //匹配代理的url
      "/api": {
    
    
        // 目标服务器地址
        target: "https://p2p.tou.mobi/api",
        ws: true,
        //路径重写
        pathRewrite: {
    
    
          "^/api": "",
        },
        changeOrigin: true,
      },
    },
  },
  configureWebpack: (config) => {
    
    
    config.externals = {
    
    
      vue: "Vue",
      vuex: "Vuex",
      // 'axios': 'axios',
      "vue-router": "VueRouter",
      // 'scss': 'scss',
      "element-ui": "ELEMENT",
    };

    let plugins = [
      // 把js 与css 打包成压缩包 搭配 Nginx使用
      new CompressionWebpackPlugin({
    
    
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"),
        threshold: 10240,
        // deleteOriginalAssets:true, //删除源文件
        minRatio: 0.8,
      }),
      new PrerenderSPAPlugin({
    
    
        // 生成文件的路径，也可以与webpakc打包的一致。
        // 下面这句话非常重要！！！
        // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动
        staticDir: path.join(__dirname, "dist"),
        routes: [
          // 需要预渲染的路由地址(需要打包成几个页面就配置几个路由)
          "/",
          "/softwareFeatures",
        ],
        // 这个很重要，如果没有配置这段，也不会进行预编译
        renderer: new Renderer({
    
    
          // inject: {
    
    
          //   foo: 'bar'
          // },
          headless: false,
          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
          renderAfterDocumentEvent: "render-event",
          // renderAfterTime: 5000
        }),
      }),
    ];
    if (process.env.NODE_ENV !== "development") {
    
    
      config.plugins = [...config.plugins, ...plugins];
    }
  },
  // const devFlag = process.env.NODE_ENV === 'development'
  chainWebpack: (config) => {
    
    
    config.when(!devFlag, (config) => {
    
    
      config.optimization.minimizer("terser").tap((args) => {
    
    
        // 注释console.*
        args[0].terserOptions.compress.drop_console = true;
        // remove debugger
        args[0].terserOptions.compress.drop_debugger = true;
        // 移除 console.log
        args[0].terserOptions.compress.pure_funcs = ["console.log"];
        // 去掉注释 如果需要看chunk-vendors公共部分插件，可以注释掉就可以看到注释了
        args[0].terserOptions.output = {
    
    
          comments: false,
        };
        return args;
      });
    });
  },
};

main.js

const vue = new Vue({
    
    
  router,
  store,
  mounted() {
    
    
    document.dispatchEvent(new Event('render-event'));
  },
  render: (h) => h(App),
}).$mount("#app");

404问题原因及解决

由于前端
vue.config 配置的 publicPath 路径 使用了 './'相对路径（当时为了方便前端测试）

正确方式publicPath 更改为’/'绝对路径