Vue.js 2.0 + vue-router + prerender-spa-plugin 3.x Prerender SPA Example
这里使用的是 prerender-spa-plugin
stable 3.x
版本,基于 puppeteer
。
如果你使用的 2.x
版本,则是基于 PhantomJS
。
重要提示: 如果你在 npm install
时一直没有没有等到成功的结果,你可以尝试删除掉 package-lock.json
和 node_modules
再尝试;如果还是不行,你可以选择尝试删除掉 package-lock.json
和 node_modules
后,使用 npm install --registry=https://registry.npm.taobao.org
来安装。(究其原因,我在 web-bookmarks
中有提到:npm 与 cnpm 要点)
Demonstrates usage of Vuejs 2.0 with Vue Router and Webpack 3. Build will generate 6 static routes at the following paths:
/
/home
/information
/ticket
/scenery
/about
npm install
npm run build
重要提示: 如果你在
npm install
时一直没有没有等到成功的结果,你可以尝试删除掉package-lock.json
和node_modules
再尝试;如果还是不行,你可以选择尝试删除掉package-lock.json
和node_modules
后,使用npm install --registry=https://registry.npm.taobao.org
来安装。(究其原因,我在web-bookmarks
中有提到:npm 与 cnpm 要点)
Now check the new dist
directory for your prerendered static files!
To view the rendered files, you can
npm run prod
Now visit the following routes in your browser (note the trailing slash):
- http://localhost:9999/
- http://localhost:9999/home
- http://localhost:9999/information/
- http://localhost:9999/ticket/
- http://localhost:9999/scenery/
- http://localhost:9999/about/
To edit the prerender-spa-plugin
configuration, look for new PrerenderSPAPlugin
in the plugins section of webpack.config.js
.
If you're using a router or have more than one page to prerender, edit the routes
array under that config object.
npm install
npm run dev
重要提示: 如果你在
npm install
时一直没有没有等到成功的结果,你可以尝试删除掉package-lock.json
和node_modules
再尝试;如果还是不行,你可以选择尝试删除掉package-lock.json
和node_modules
后,使用npm install --registry=https://registry.npm.taobao.org
来安装。(究其原因,我在web-bookmarks
中有提到:npm 与 cnpm 要点)
- 1.1 在开发过程中(
npm run dev
),vue-router
请务必使用history
模式。 - 2.1 如果你的项目是部署在根目录下的话,那么你可以直接打包(
npm run build
) ,然后进行部署。 - 2.2 如果你的项目要部署在子目录下的话,那么你可能要注意了,这个时候你的
vue-router
不应该使用history
模式,与此同时,publicPath
也应修改为./
在写这个项目的时候也记录了几个知识点:关于本项目中的知识点