vue hash模式改成history,同时实现spa预渲染问题

 // mode:'hash',
    mode: 'history',
    base: '/',

//history为"/",hash:'./'
//publicPath:'./',
publicPath:'/',

// histroy模式:"/" ,hash模式:"./"
//assetsPublicPath: './',
assetsPublicPath: '/',

location / {
    proxy_pass http://127.0.0.1:80;
    root /usr/local/tomcat/tomcat_xhcf/webapps/ROOT; #表明路径
    index index.html index.htm; 
    try_files $uri $uri/ /index.html; #交给index.html处理
    
}

npm i -s prerender-spa-plugin

cnpm i --save prerender-spa-plugin

// 在vue-cli生成的文件的基础上，只有下面这个才是我们要配置的
    new PrerenderSPAPlugin({
      // 生成文件的路径，也可以与webpakc打包的一致。
      // 下面这句话非常重要！！！
      // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
      staticDir: path.join(__dirname, '../dist'),

      // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。这里很重要，需要把自己想要生成静态文件的路由全部写进去。
      routes: [
        '/',
        '/about',
        ],

      // 这个很重要，如果没有配置这段，也不会进行预编译
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
        renderAfterDocumentEvent: 'render-event',
        //时间
        renderAfterTime:5000
      })
    })

/* 记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能*/
const app =new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',

  /* 这句非常重要，否则预渲染将不会启动 */
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }

}).$mount('#app')

dist
│    ├── about          
│           └── index.html           
│   
├── index.html      
└── static

nginx -t #测试配置是否正确
nginx -s reload #重启nginx配置