Browse Source

修复bug

router
npmrun 4 years ago
parent
commit
cb1500f93b
  1. 3
      build/util.js
  2. 55
      build/webpack.base.config.js
  3. 19
      build/webpack.client.config.js
  4. 5
      build/webpack.server.config.js
  5. 4
      dist/1.38929b462074d299128f.chunk.css
  6. 1
      dist/1.bfa05cf7c313da6278fc.js
  7. 1
      dist/2.6dae8c5a9c8c367b7390.js
  8. 2
      dist/2.a0b09c382597960bc0ac.js
  9. 1
      dist/2.a0b09c382597960bc0ac.js.map
  10. 4
      dist/2.d25fcc43ae3b4a442e86.chunk.css
  11. 4
      dist/3.76b9c9cfe21cd7b90794.chunk.css
  12. 2
      dist/3.c1ce12f0c4971c482f67.js
  13. 1
      dist/3.c1ce12f0c4971c482f67.js.map
  14. 1
      dist/3.e3b63fbac589cfb5bd21.js
  15. 4
      dist/app.1cd3243bb0c36eb8d3e8.css
  16. 2
      dist/app.aa5c7c7447f99154a897.js
  17. 1
      dist/app.aa5c7c7447f99154a897.js.map
  18. 12
      dist/app.af30adee7df17dc5afc4.js
  19. 1
      dist/manifest.9af4bfe8b557eda40f7c.js.map
  20. 102
      dist/vue-ssr-client-manifest.json
  21. 227
      dist/vue-ssr-server-bundle.json
  22. 94
      package-lock.json
  23. 4
      package.json
  24. 26
      server.js
  25. 7
      src/App.vue
  26. 6
      src/router/index.js
  27. 6
      src/views/about.vue
  28. 6
      src/views/home/index.vue
  29. 13
      src/views/main/index.vue

3
build/util.js

@ -0,0 +1,3 @@
module.exports = {
isProd: process.env.NODE_ENV === "production",
};

55
build/webpack.base.config.js

@ -1,9 +1,27 @@
const path = require("path");
const { isProd } = require("./util");
const { VueLoaderPlugin } = require("vue-loader");
var ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin')
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
module.exports = {
const commonCssLoader = [
isProd?{
// https://github.com/vuejs/vue-router/issues/2380
loader: ExtractCssChunksPlugin.loader,
options: {
hot: !isProd,
reloadAll: !isProd
},
}:'vue-style-loader',
// 'vue-style-loader',
{
loader: 'css-loader',
options: { }
},
]
const allConfig = {
output: {
path: path.resolve(__dirname, "../dist"),
publicPath: "/dist/",
@ -12,10 +30,10 @@ module.exports = {
resolve: {
alias: {
public: path.resolve(__dirname, "../public"),
'@': path.resolve(__dirname, "../src"),
"@": path.resolve(__dirname, "../src"),
},
},
devtool: "#cheap-module-source-map",
devtool: isProd ? false : "cheap-module-source-map",//"#cheap-module-source-map",
module: {
noParse: /es6-promise\.js$/, // avoid webpack shimming process
rules: [
@ -43,33 +61,25 @@ module.exports = {
},
{
test: /\.css?$/,
use: [
'vue-style-loader',
'css-loader'
],
use: [...commonCssLoader],
},
{
test: /\.less?$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
],
use: [...commonCssLoader,"less-loader"],
},
{
test: /\.scss?$/,
use: [
'vue-style-loader',
'css-loader',
...commonCssLoader,
{
loader: 'sass-loader',
loader: "sass-loader",
options: {
// 你也可以从一个文件读取,例如 `variables.scss`
// 如果 sass-loader 版本 = 8,这里使用 `prependData` 字段
// 如果 sass-loader 版本 < 8,这里使用 `data` 字段
additionalData: `$color: red;`
}
}
additionalData: `$color: red;`,
},
},
],
},
],
@ -79,3 +89,12 @@ module.exports = {
hints: false,
},
};
if(isProd){
allConfig.plugins.push(
new ExtractCssChunksPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[name].[contenthash].chunk.css'
})
);
}
module.exports = allConfig;

19
build/webpack.client.config.js

@ -1,9 +1,10 @@
const webpack = require("webpack");
const { merge } = require('webpack-merge');
const { merge } = require("webpack-merge");
const base = require("./webpack.base.config");
const { isProd } = require("./util");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
module.exports = merge(base, {
const allConfig = merge(base, {
mode: process.env.NODE_ENV || "development",
entry: {
app: "./src/entry-client.js",
@ -23,7 +24,19 @@ module.exports = merge(base, {
splitChunks: {
chunks: "all",
minChunks: 1,
name: "manifest"
name: "manifest",
cacheGroups: {
vendors: {
name: "vendors",
test: /[\\/]node_modules[\\/]/,
chunks: "all",
minSize: 0,
minChunks: 2, //有两次引用以上才提取
priority: 3, //比上面更低的权重
},
},
},
},
});
module.exports = allConfig;

5
build/webpack.server.config.js

@ -11,7 +11,7 @@ module.exports = merge(base, {
// 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
target: 'node',
// 对 bundle renderer 提供 source map 支持
devtool: 'source-map',
devtool: '#source-map',
// 将 entry 指向应用程序的 server entry 文件
entry: './src/entry-server.js',
// 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
@ -32,6 +32,9 @@ module.exports = merge(base, {
// 构建为单个 JSON 文件的插件。
// 默认文件名为 `vue-ssr-server-bundle.json`
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': '"server"'

4
dist/1.38929b462074d299128f.chunk.css

@ -0,0 +1,4 @@
div[data-v-65575f08] {
color: gold;
}

1
dist/1.bfa05cf7c313da6278fc.js

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{12:function(n,t,e){},15:function(n,t,e){"use strict";e(12)},18:function(n,t,e){"use strict";e.r(t);e(15);var i=e(3),s=Object(i.a)({},(function(){var n=this.$createElement;return(this._self._c||n)("div",[this._v("\n about\n")])}),[],!1,null,"65575f08",null);t.default=s.exports}}]);

1
dist/2.6dae8c5a9c8c367b7390.js

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{11:function(t,s,e){},14:function(t,s,e){"use strict";e(11)},17:function(t,s,e){"use strict";e.r(s);var n={asyncData:function(t){var s=t.store;t.route;return console.log("asyncData"),console.log("222asdasd"),s.dispatch("fetchItem","1")},computed:{item:function(){return this.$store.state.items[1]}}},i=(e(14),e(3)),o=Object(i.a)(n,(function(){var t=this.$createElement,s=this._self._c||t;return s("div",[s("div",[this._v("asad")]),s("p",[this._v(this._s(this.item)+"哈哈哈哈")])])}),[],!1,null,"678fe196",null);s.default=o.exports}}]);

2
dist/2.a0b09c382597960bc0ac.js

@ -1,2 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{17:function(n,t,e){"use strict";e.r(t);var s=e(4),u=Object(s.a)({},(function(){var n=this.$createElement;return(this._self._c||n)("div",[this._v("\n about\n")])}),[],!1,null,null,null);t.default=u.exports}}]);
//# sourceMappingURL=2.a0b09c382597960bc0ac.js.map

1
dist/2.a0b09c382597960bc0ac.js.map

@ -1 +0,0 @@
{"version":3,"file":"2.a0b09c382597960bc0ac.js","sources":["webpack:///2.a0b09c382597960bc0ac.js"],"mappings":"AAAA","sourceRoot":""}

4
dist/2.d25fcc43ae3b4a442e86.chunk.css

@ -0,0 +1,4 @@
div[data-v-678fe196] {
color: pink;
}

4
dist/3.76b9c9cfe21cd7b90794.chunk.css

@ -0,0 +1,4 @@
*[data-v-78d4e43a] {
color: khaki;
}

2
dist/3.c1ce12f0c4971c482f67.js

@ -1,2 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{16:function(t,e,s){"use strict";s.r(e);var i={asyncData:function(t){var e=t.store,s=t.route;return e.dispatch("fetchItem",s.params.id)},computed:{item:function(){return this.$store.state.items[this.$route.params.id]}}},n=s(4),a=Object(n.a)(i,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",[this._v("asad\n "),e("p",[this._v(this._s(this.item))])])}),[],!1,null,null,null);e.default=a.exports}}]);
//# sourceMappingURL=3.c1ce12f0c4971c482f67.js.map

1
dist/3.c1ce12f0c4971c482f67.js.map

@ -1 +0,0 @@
{"version":3,"file":"3.c1ce12f0c4971c482f67.js","sources":["webpack:///3.c1ce12f0c4971c482f67.js"],"mappings":"AAAA","sourceRoot":""}

1
dist/3.e3b63fbac589cfb5bd21.js

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{13:function(n,t,e){},16:function(n,t,e){"use strict";e(13)},19:function(n,t,e){"use strict";e.r(t);e(16);var i=e(3),s=Object(i.a)({},(function(){var n=this.$createElement;return(this._self._c||n)("div",[this._v("\n main\n")])}),[],!1,null,"78d4e43a",null);t.default=s.exports}}]);

4
dist/app.1cd3243bb0c36eb8d3e8.css

@ -0,0 +1,4 @@
*[data-v-4a7c4654] {
color: red;
}

2
dist/app.aa5c7c7447f99154a897.js

@ -1,2 +0,0 @@
!function(t){function e(e){for(var r,i,u=e[0],c=e[1],s=e[2],f=0,p=[];f<u.length;f++)i=u[f],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(t[r]=c[r]);for(l&&l(e);p.length;)p.shift()();return a.push.apply(a,s||[]),n()}function n(){for(var t,e=0;e<a.length;e++){for(var n=a[e],r=!0,u=1;u<n.length;u++){var c=n[u];0!==o[c]&&(r=!1)}r&&(a.splice(e--,1),t=i(i.s=n[0]))}return t}var r={},o={0:0},a=[];function i(e){if(r[e])return r[e].exports;var n=r[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.e=function(t){var e=[],n=o[t];if(0!==n)if(n)e.push(n[2]);else{var r=new Promise((function(e,r){n=o[t]=[e,r]}));e.push(n[2]=r);var a,u=document.createElement("script");u.charset="utf-8",u.timeout=120,i.nc&&u.setAttribute("nonce",i.nc),u.src=function(t){return i.p+""+({}[t]||t)+"."+{2:"a0b09c382597960bc0ac",3:"c1ce12f0c4971c482f67"}[t]+".js"}(t);var c=new Error;a=function(e){u.onerror=u.onload=null,clearTimeout(s);var n=o[t];if(0!==n){if(n){var r=e&&("load"===e.type?"missing":e.type),a=e&&e.target&&e.target.src;c.message="Loading chunk "+t+" failed.\n("+r+": "+a+")",c.name="ChunkLoadError",c.type=r,c.request=a,n[1](c)}o[t]=void 0}};var s=setTimeout((function(){a({type:"timeout",target:u})}),12e4);u.onerror=u.onload=a,document.head.appendChild(u)}return Promise.all(e)},i.m=t,i.c=r,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="/dist/",i.oe=function(t){throw console.error(t),t};var u=window.webpackJsonp=window.webpackJsonp||[],c=u.push.bind(u);u.push=e,u=u.slice();for(var s=0;s<u.length;s++)e(u[s]);var l=c;a.push([14,1]),n()}({10:function(t,e,n){"use strict";n.r(e);var r=n(6),o=n.n(r),a=n(7),i=n.n(a)()(o.a);i.push([t.i,"*[data-v-0bb2a73c] {\n color: red;\n}\n","",{version:3,sources:["webpack://./src/App.vue"],names:[],mappings:"AAAA;EACE,UAAU;AACZ",sourcesContent:["*[data-v-0bb2a73c] {\n color: red;\n}\n"],sourceRoot:""}]),e.default=i},14:function(t,e,n){"use strict";n.r(e);var r=n(0),o={data:function(){return{}},mounted:function(){console.log("asd")}},a=(n(9),n(4)),i=Object(a.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"app"}},[this._v("\n hello world!!!\n "),e("div",{staticStyle:{display:"flex","justify-content":"space-around"}},[e("router-link",{staticStyle:{width:"100%","text-align":"center","line-height":"50px"},attrs:{tag:"div",to:"/home"}},[this._v("home")]),e("router-link",{staticStyle:{width:"100%","text-align":"center","line-height":"50px"},attrs:{tag:"div",to:"/about"}},[this._v("about")])],1),e("router-view")],1)}),[],!1,null,"0bb2a73c",null).exports,u=n(2);r.a.use(u.a);var c=n(3);r.a.use(c.a);var s=n(8);Vue.mixin({beforeRouteUpdate:function(t,e,n){var r=this.$options.asyncData;r?r({store:this.$store,route:t}).then(n).catch(n):n()}});var l,f,p=(l=new u.a({mode:"history",routes:[{path:"/",redirect:"/home"},{path:"/home",component:function(){return n.e(3).then(n.bind(null,16))}},{path:"/about",component:function(){return n.e(2).then(n.bind(null,17))}}]}),f=new c.a.Store({state:{items:{}},actions:{fetchItem:function(t,e){var n=t.commit;return new Promise((function(t,e){n("setItem",{id:1,item:"111"}),t()}))}},mutations:{setItem:function(t,e){var n=e.id,o=e.item;r.a.set(t.items,n,o)}}}),Object(s.sync)(f,l),{app:new r.a({router:l,store:f,render:function(t){return t(i)}}),router:l,store:f}),d=p.app,h=p.router,v=p.store;window.__INITIAL_STATE__&&v.replaceState(window.__INITIAL_STATE__),h.onReady((function(){h.beforeResolve((function(t,e,n){var r=h.getMatchedComponents(t),o=h.getMatchedComponents(e),a=!1,i=r.filter((function(t,e){return a||(a=o[e]!==t)}));if(!i.length)return n();Promise.all(i.map((function(e){if(e.asyncData)return e.asyncData({store:v,route:t})}))).then((function(){n()})).catch(n)})),d.$mount("#app")}))},5:function(t,e,n){var r=n(10);r.__esModule&&(r=r.default),"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);(0,n(15).default)("20f5089d",r,!0,{})},9:function(t,e,n){"use strict";n(5)}});
//# sourceMappingURL=app.aa5c7c7447f99154a897.js.map

1
dist/app.aa5c7c7447f99154a897.js.map

@ -1 +0,0 @@
{"version":3,"file":"app.aa5c7c7447f99154a897.js","sources":["webpack:///app.aa5c7c7447f99154a897.js"],"mappings":"AAAA","sourceRoot":""}

12
dist/manifest.9af4bfe8b557eda40f7c.js → dist/app.af30adee7df17dc5afc4.js

File diff suppressed because one or more lines are too long

1
dist/manifest.9af4bfe8b557eda40f7c.js.map

@ -1 +0,0 @@
{"version":3,"file":"manifest.9af4bfe8b557eda40f7c.js","sources":["webpack:///manifest.9af4bfe8b557eda40f7c.js"],"mappings":"AAAA;;;;;;AAYA;;;;;AAyvPA;;;;;;AA08FA","sourceRoot":""}

102
dist/vue-ssr-client-manifest.json

@ -1,22 +1,26 @@
{
"publicPath": "/dist/",
"all": [
"2.a0b09c382597960bc0ac.js",
"2.a0b09c382597960bc0ac.js.map",
"3.c1ce12f0c4971c482f67.js",
"3.c1ce12f0c4971c482f67.js.map",
"app.aa5c7c7447f99154a897.js",
"app.aa5c7c7447f99154a897.js.map",
"manifest.9af4bfe8b557eda40f7c.js",
"manifest.9af4bfe8b557eda40f7c.js.map"
"1.38929b462074d299128f.chunk.css",
"1.bfa05cf7c313da6278fc.js",
"2.6dae8c5a9c8c367b7390.js",
"2.d25fcc43ae3b4a442e86.chunk.css",
"3.76b9c9cfe21cd7b90794.chunk.css",
"3.e3b63fbac589cfb5bd21.js",
"app.1cd3243bb0c36eb8d3e8.css",
"app.af30adee7df17dc5afc4.js"
],
"initial": [
"manifest.9af4bfe8b557eda40f7c.js",
"app.aa5c7c7447f99154a897.js"
"app.1cd3243bb0c36eb8d3e8.css",
"app.af30adee7df17dc5afc4.js"
],
"async": [
"2.a0b09c382597960bc0ac.js",
"3.c1ce12f0c4971c482f67.js"
"1.38929b462074d299128f.chunk.css",
"1.bfa05cf7c313da6278fc.js",
"2.6dae8c5a9c8c367b7390.js",
"2.d25fcc43ae3b4a442e86.chunk.css",
"3.76b9c9cfe21cd7b90794.chunk.css",
"3.e3b63fbac589cfb5bd21.js"
],
"modules": {
"9dec38a2": [
@ -27,10 +31,6 @@
6,
7
],
"92db5ef6": [
6,
7
],
"e0eacffe": [
6,
7
@ -39,30 +39,18 @@
6,
7
],
"f1ad206e": [
4,
5
],
"98dff2f8": [
"f2f95682": [
6,
7
],
"08194f7f": [
"6f54afb6": [
6,
7
],
"6f54afb6": [
"c407cc32": [
6,
7
],
"a5e43666": [
4,
5
],
"6a380720": [
4,
5
],
"4dc8caee": [
6,
7
@ -76,20 +64,60 @@
7
],
"5163fcfe": [
6,
7
],
"7c1b7f11": [
3,
2
],
"ec5b0a86": [
0,
1
],
"ca979196": [
4,
5
],
"3ae59d9f": [
6,
7
"3e725ae9": [
3,
2
],
"d1915502": [
2,
3
"7d6797e5": [
0,
1
],
"5d0b130d": [
4,
5
],
"72df3996": [
3,
2
],
"f78e79c6": [
0,
1
],
"41feab8f": [
4,
5
],
"e54e7b88": [
6,
7
],
"74551b3a": [
0,
1
],
"a0eab698": [
3,
2
],
"63b94650": [
4,
5
]
}
}

227
dist/vue-ssr-server-bundle.json

File diff suppressed because one or more lines are too long

94
package-lock.json

@ -3263,6 +3263,51 @@
}
}
},
"extract-css-chunks-webpack-plugin": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/extract-css-chunks-webpack-plugin/-/extract-css-chunks-webpack-plugin-4.9.0.tgz",
"integrity": "sha512-HNuNPCXRMqJDQ1OHAUehoY+0JVCnw9Y/H22FQzYVwo8Ulgew98AGDu0grnY5c7xwiXHjQa6yJ/1dxLCI/xqTyQ==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
"normalize-url": "1.9.1",
"schema-utils": "^1.0.0",
"webpack-sources": "^1.1.0"
},
"dependencies": {
"json5": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
"integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
"dev": true,
"requires": {
"minimist": "^1.2.5"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"schema-utils": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
"integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
"dev": true,
"requires": {
"ajv": "^6.1.0",
"ajv-errors": "^1.0.0",
"ajv-keywords": "^3.1.0"
}
}
}
},
"extsprintf": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@ -4039,6 +4084,12 @@
}
}
},
"is-plain-obj": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
"integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
"dev": true
},
"is-plain-object": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@ -4886,6 +4937,18 @@
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true
},
"normalize-url": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
"integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
"dev": true,
"requires": {
"object-assign": "^4.0.1",
"prepend-http": "^1.0.0",
"query-string": "^4.1.0",
"sort-keys": "^1.0.0"
}
},
"npm-run-path": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@ -5364,6 +5427,12 @@
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
"dev": true
},
"prepend-http": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
"dev": true
},
"prettier": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
@ -5482,6 +5551,16 @@
"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
},
"query-string": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
"integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
"dev": true,
"requires": {
"object-assign": "^4.1.0",
"strict-uri-encode": "^1.0.0"
}
},
"querystring": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@ -6198,6 +6277,15 @@
}
}
},
"sort-keys": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
"integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
"dev": true,
"requires": {
"is-plain-obj": "^1.0.0"
}
},
"source-list-map": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@ -6400,6 +6488,12 @@
"integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
"dev": true
},
"strict-uri-encode": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
},
"string-width": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",

4
package.json

@ -4,7 +4,8 @@
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "node server",
"start": "cross-env NODE_ENV=production node server",
"build": "rimraf dist && npm run build:client && npm run build:server",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress",
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress",
@ -29,6 +30,7 @@
"compression": "^1.7.4",
"cross-env": "^7.0.3",
"css-loader": "^5.2.6",
"extract-css-chunks-webpack-plugin": "^4.9.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"less": "^4.1.1",
"lru-cache": "^6.0.0",

26
server.js

@ -1,12 +1,15 @@
// server.js
const express = require('express')
const path = require('path')
const fs = require('fs')
const LRU = require('lru-cache')
const microcache = require('route-cache')
const compression = require('compression')
const resolve = file => path.resolve(__dirname, file)
const { createBundleRenderer } = require('vue-server-renderer')
const { isProd } = require("./build/util");
const useMicroCache = process.env.MICRO_CACHE !== 'false'
const serverInfo =
@ -34,7 +37,20 @@ function createRenderer (bundle, options) {
let renderer
let readyPromise
const templatePath = resolve('./src/index.template.html')
if (isProd) {
// In production: create server renderer using template and built server bundle.
// The server bundle is generated by vue-ssr-webpack-plugin.
const template = fs.readFileSync(templatePath, 'utf-8')
const bundle = require('./dist/vue-ssr-server-bundle.json')
// The client manifests are optional, but it allows the renderer
// to automatically infer preload/prefetch links and directly add <script>
// tags for any async chunks used during render, avoiding waterfall requests.
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
renderer = createRenderer(bundle, {
template,
clientManifest
})
}else{
readyPromise = require('./build/setup-dev-server')(
app,
templatePath,
@ -42,9 +58,10 @@ readyPromise = require('./build/setup-dev-server')(
renderer = createRenderer(bundle, options)
}
)
}
const serve = (path, cache) => express.static(resolve(path), {
maxAge: cache ? 1000 * 60 * 60 * 24 * 30 : 0
maxAge: cache && isProd ? 1000 * 60 * 60 * 24 * 30 : 0
})
app.use(compression({ threshold: 0 }))
@ -83,17 +100,18 @@ function render (req, res) {
`,
url: req.url
}
console.log(renderer);
renderer.renderToString(context, (err, html) => {
if (err) {
return handleError(err)
}
res.send(html)
if (!isProd) {
console.log(`whole request: ${Date.now() - s}ms`)
}
})
}
app.get('*', (req, res) => {
app.get('*', isProd ? render : (req, res) => {
readyPromise.then(() => render(req, res))
})

7
src/App.vue

@ -1,9 +1,10 @@
<template>
<div id="app">
hello world!!!
<h1>这是一个ssr项目首页渲染使用的是ssr,后面由客户端接管</h1>
<div style="display:flex;justify-content: space-around;">
<router-link tag="div" to="/home" style="width:100%;text-align:center;line-height: 50px;">home</router-link>
<router-link tag="div" to="/about" style="width:100%;text-align:center;line-height: 50px;">about</router-link>
<router-link to="/home" style="width:100%;text-align:center;line-height: 50px;">home</router-link>
<router-link to="/about" style="width:100%;text-align:center;line-height: 50px;">about</router-link>
<router-link to="/main" style="width:100%;text-align:center;line-height: 50px;">main</router-link>
</div>
<router-view></router-view>
</div>

6
src/router/index.js

@ -13,11 +13,15 @@ export function createRouter () {
},
{
path: '/home',
component: ()=>import("@/views/home.vue")
component: ()=>import("@/views/home/index.vue")
},
{
path: '/about',
component: ()=>import("@/views/about.vue")
},
{
path: '/main',
component: ()=>import("@/views/main/index.vue")
}
]
})

6
src/views/about.vue

@ -3,3 +3,9 @@
about
</div>
</template>
<style scoped lang="less">
div{
color: gold;
}
</style>

6
src/views/home.vue → src/views/home/index.vue

@ -21,3 +21,9 @@ export default {
},
};
</script>
<style scoped lang="less">
div{
color: pink;
}
</style>

13
src/views/main/index.vue

@ -0,0 +1,13 @@
<template>
<div>
main
</div>
</template>
<style scoped lang="less">
*{
color: khaki;
}
</style>
Loading…
Cancel
Save