升级依赖项

README.md

@@ -2,4 +2,8 @@
 
 基于Vue 2，Webpack 4，Koa 2的SSR脚手架。
 
-具体配置指南请参阅博文：[Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南 https://www.wyr.me/post/593](https://www.wyr.me/post/593)
+具体配置指南请参阅博文：[Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南 https://www.wyr.me/post/593](https://www.wyr.me/post/593)
+
+**2019年04月07日21:54:24 更新**
+1、升级各个依赖项。
+2、完善对请求错误的处理。

config/app.js

@@ -1,7 +1,7 @@
 module.exports = {
   app: {
     port: 3000, // 监听的端口
-    devHost: 'localhost', // 开发环境下打开的地址，监听了0.0.0.0，但是不是所有设备都支持访问这个地址，用127.0.0.1或localhost代替
+    devHost: '127.0.0.1', // 开发环境下打开的地址，监听了0.0.0.0，但是不是所有设备都支持访问这个地址，用127.0.0.1或localhost代替
     open: true // 是否打开浏览器
   }
 }

config/ssr.js

@@ -15,7 +15,7 @@ module.exports = app => {
   return new Promise((resolve, reject) => {
     const createRenderer = (bundle, options) => {
       return createBundleRenderer(bundle, Object.assign(options, {
-        cache: LRU({
+        cache: new LRU({
           max: 1000,
           maxAge: 1000 * 60 * 15
         }),
@@ -81,6 +81,7 @@ module.exports = app => {
           html = '404 | Not Found'
         } else {
           status = 500
+          // console.log(e)
           console.log(chalk.red('\nError: '), e.message)
           html = '500 | Internal Server Error'
         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ssr-koa2-scaffold",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Vue SSR Koa2 Scaffold",
   "main": "src/app.js",
   "repository": "https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold",
@@ -17,52 +17,52 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
-    "chokidar": "^2.0.4",
+    "chokidar": "^2.1.5",
     "cross-env": "^5.2.0",
-    "html-minifier": "^3.5.21",
+    "html-minifier": "^4.0.0",
-    "koa": "^2.6.2",
+    "koa": "^2.7.0",
-    "koa-body": "^4.0.4",
+    "koa-body": "^4.1.0",
     "koa-compress": "^3.0.0",
     "koa-send": "^5.0.0",
-    "lru-cache": "^4.1.3",
+    "lru-cache": "^5.1.1",
     "memory-fs": "^0.4.1",
     "readline": "^1.3.0",
-    "vue": "^2.5.17",
+    "vue": "^2.6.10",
-    "vue-router": "^3.0.1",
+    "vue-router": "^3.0.2",
-    "vue-server-renderer": "^2.5.17",
+    "vue-server-renderer": "^2.6.10",
-    "vue-template-compiler": "^2.5.17",
+    "vue-template-compiler": "^2.6.10",
-    "vuex": "^3.0.1",
+    "vuex": "^3.1.0",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.5",
+    "@babel/core": "^7.4.3",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-syntax-jsx": "^7.0.0",
+    "@babel/plugin-syntax-jsx": "^7.2.0",
-    "@babel/polyfill": "^7.0.0",
+    "@babel/polyfill": "^7.4.3",
-    "@babel/preset-env": "^7.1.5",
+    "@babel/preset-env": "^7.4.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^8.0.4",
+    "babel-loader": "^8.0.5",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "case-sensitive-paths-webpack-plugin": "^2.2.0",
-    "chalk": "^2.4.1",
+    "chalk": "^2.4.2",
-    "copy-webpack-plugin": "^4.6.0",
+    "copy-webpack-plugin": "^5.0.2",
-    "css-loader": "^1.0.1",
+    "css-loader": "^2.1.1",
     "execa": "^1.0.0",
-    "file-loader": "^2.0.0",
+    "file-loader": "^3.0.1",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "json-loader": "^0.5.7",
-    "mini-css-extract-plugin": "^0.4.4",
+    "mini-css-extract-plugin": "^0.5.0",
-    "opn": "^5.4.0",
+    "opn": "^6.0.0",
     "url-loader": "^1.1.2",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^15.4.2",
+    "vue-loader": "^15.7.0",
     "vue-style-loader": "^4.1.2",
-    "webpack": "^4.25.1",
+    "webpack": "^4.29.6",
-    "webpack-cli": "^3.1.2",
+    "webpack-cli": "^3.3.0",
-    "webpack-dev-middleware": "^3.4.0",
+    "webpack-dev-middleware": "^3.6.2",
     "webpack-hot-middleware": "^2.24.3",
-    "webpack-merge": "^4.1.4",
+    "webpack-merge": "^4.2.1",
     "webpack-node-externals": "^1.7.2"
   }
 }

src/api/app.js

@@ -5,7 +5,7 @@ export default app => {
   app.proxy = true
 
   const server = require('http').createServer(app.callback())
-  // const io = require('socket.io')(server)
+  // const io = require('socket.io')(server) // 注释为启用socket.io的方法
 
   // io.on('connection', function (socket) {
   //   console.log('a user connected: ' + socket.id)
@@ -32,7 +32,7 @@ export default app => {
     })
     .use(KoaBody({
       multipart: true, // 开启对multipart/form-data的支持
-      strict: false, // 取消严格模式，parse GET, HEAD, DELETE requests
+      parsedMethods: ['POST', 'PUT', 'PATCH', 'GET', 'HEAD', 'DELETE'], // parse GET, HEAD, DELETE requests
       formidable: { // 设置上传参数
         // uploadDir: path.join(__dirname, '../assets/uploads/tmpfile')
       },

src/web/store/modules/api.js

@@ -11,8 +11,12 @@ const getters = {
 // actions
 const actions = {
   async fetchVal ({ commit }) {
-    const { data } = await this.$request.get('/api')
+    try {
-    commit('setVal', data)
+      const { data } = await this.$request.get('http://127.0.0.1:3000/api')
+      commit('setVal', data)
+    } catch (err) {
+      commit('setVal', 'Error')
+    }
   }
 }