该文章讲的还是关于vue查看源代码的问题，目的是用于渲染页面是vue页面能够看到源代码
上一篇文章使用的服务端渲染方法有点瑕疵，那就是项目打包以后并不能看到index.html，想要项目正常运行需要把整个项目文件夹放上去，而不是把dist里面的文件放上去就可以了。
所以这里跟大家介绍另一种方法，这种方法同样需要服务端来配合，
服务端配置可以参考如下链接
https://router.vuejs.org/zh-cn/essentials/history-mode.html
https://segmentfault.com/q/1010000006177894/a-1020000006619306
除此以外前端也需要配置一些东西
可以参考：https://www.npmjs.com/package/prerender-spa-plugin
其中的webpack.config.js其实就是webpack.base.config.js和 webpack.dev.config.js和 webpack.prod.config.js集合，我们主需要在 和 webpack.prod.config.js里面写入就可以了
//引入
const
PrerenderSpaPlugin =
require(
'prerender-spa-plugin')
//配置所需渲染的路由路径
new
PrerenderSpaPlugin(
//将渲染的文件放到dist目录下
path.
join(
__dirname,
'../dist'),
//需要预渲染的路由信息
[
'/',
'/index',
'/page1',
'/page2',
'/page3',
'/page4',
'/page5',
'/page6'],
// [ '/'],
{
//在一定时间后再捕获页面信息，使得页面数据信息加载完成
captureAfterTime:
50000,
//忽略打包错误
ignoreJSErrors:
true,
phantomOptions:
'--web-security=false',
maxAttempts:
10,
}
),
然后config/index.js 中build 里面的assetsPublicPath最好改为绝对路径，避免出错
build: {
//.......
assetsPublicPath:
'http://www.xxxxx.com/xxxxx/',
}
路由的 index.js 文件开启 history模式，并加上路径
export
default
new
Router({
mode:
'history',
base:
'/xxxxx/',//这里的路径注意和上面conig/index.js 中 build 的 assetsPublicPath保持一致
routes: [
{
path:
'/index',
name:
'index',
component:index},
{
path:
'/page1',
name:
'page1',
component:page1},
{
path:
'/page2',
name:
'page2',
component:page2},
//......
]
})
万事俱备准备打包，如果之前没有装过prerender 可能会提示找不到module ，
需要install一下npm install --save prerender-spa-plugin
打包上传测试
Note:如果碰到打开页面后刷新页面就崩掉变为空白的问题，那是后台配置设置的问题，具体操作百度一下