账户中心更新2.0.0版本迭代

1、重写plugins/axios文件，并更名为axois-nuxt，使它支持ssr后端渲染服务，并读取store内部数据
2、修改nuxt.config文件，使其支持~utils、~components等文件的相关引入
3、修改eslint-babel 文件

新版本存在一个问题，任意修改一个文件（非配置文件）需要重新启动项目，原因是因为dev命令跑的是 server文件，走的是build方法导致这个问题，若不想进行此命令

components/register/PersonalRegistration.vue

@@ -82,7 +82,7 @@
       <loading v-show="isShowLoading"/>
     </div>
     <!--尾部-->
-    <div v-html="loginStyle.footUrl" class="footer"></div>
+    <div v-html="loginStyle && loginStyle.footUrl" class="footer"></div>
   </div>
 </template>
 

middleware/check-auth.js

@@ -6,7 +6,7 @@ export default function ({ isServer, store, req }) {
   if (isServer) {
     // store.dispatch('loadUserInfo')
   } else {
-    getAuthInfo()
+    // getAuthInfo()
     // const loggedUser = getAuthInfo()
     // store.commit('option/REQUEST_USER_INFO_SUCCESS', loggedUser)
   }

nuxt.config.js

@@ -37,24 +37,29 @@ module.exports = {
     /*
     ** Run ESLINT on save
     */
+    extractCSS: { allChunks: true },
     extend (config, { dev, isClient, isServer }) {
       config.resolve.alias['~utils'] = path.join(__dirname, 'utils')
-      config.module.rules.push({
-        test: /\.scss$/,
-        loader: 'vue-style-loader!css-loader!sass-loader'
-      })
-      config.module.rules.push({
-        test: /\.js$/,
-        loader: 'babel-loader'
-      })
-      if (isClient) {
-        config.module.rules.push({
-          enforce: 'pre',
-          test: /\.(js|vue)$/,
-          loader: 'eslint-loader',
-          exclude: /(node_modules)/
-        })
-      }
+      config.resolve.alias['~components'] = path.join(__dirname, 'components')
+      config.resolve.alias['~assets'] = path.join(__dirname, 'assets')
+      config.resolve.alias['~plugins'] = path.join(__dirname, 'plugins')
+      config.resolve.alias['~store'] = path.join(__dirname, 'store')
+      // config.module.rules.push({
+      //   test: /\.scss$/,
+      //   loader: 'vue-style-loader!css-loader!sass-loader'
+      // })
+      // config.module.rules.push({
+      //   test: /\.js$/,
+      //   loader: 'babel-loader'
+      // })
+      // if (isClient) {
+      //   config.module.rules.push({
+      //     enforce: 'pre',
+      //     test: /\.(js|vue)$/,
+      //     loader: "eslint-loader",
+      //     exclude: /node_modules/
+      //   })
+      // }
     },
     vendor: [
       'axios',
@@ -78,16 +83,21 @@ module.exports = {
     ]
   },
   css: [
-    {src: '~assets/scss/mobileCommon.scss', lang: 'scss'},
-    {src: '~assets/scss/app.scss', lang: 'scss'}
+    '~assets/scss/mobileCommon.scss',
+    '~assets/scss/app.scss'
   ],
   dev: !isProdMode,
   env: {
     baseUrl,
   },
-  plugins: [{
-    src: '~plugins/axios.js'
-  }, {
+  plugins: [
+    {
+      src: '~plugins/axios-nuxt.js'
+    },
+  //   {
+  //   src: '~plugins/axios.js'
+  // },
+    {
     src: '~plugins/element-ui.js'
   }, {
     src: '~plugins/mint-ui.js'

package.json

@@ -17,7 +17,7 @@
     "http-proxy-middleware": "^0.17.4",
     "jsonp": "^0.2.1",
     "mint-ui": "^2.2.13",
-    "nuxt": "0.10.6",
+    "nuxt": "^2.0.0",
     "v-vuerify-next": "^0.2.0",
     "vee-validate": "^2.0.0",
     "vue-awesome-swiper": "^2.5.4",
@@ -38,16 +38,18 @@
     "precommit": "npm run lint"
   },
   "devDependencies": {
+    "babel-plugin-component": "^0.10.1",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^7.1.1",
-    "babel-plugin-component": "^0.10.1",
-    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
-    "eslint": "^3.15.0",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.13.0",
+    "eslint-plugin-flowtype": "^2.49.3",
     "eslint-config-standard": "^6.2.1",
     "eslint-loader": "^1.6.1",
     "eslint-plugin-html": "^2.0.0",

plugins/axios-nuxt.js

@@ -0,0 +1,51 @@
+import Vue from 'vue'
+import Axios from 'axios'
+
+const service = Axios.create({
+  withCredentials: true,
+  baseUrl: '/'
+})
+
+export function axiosHttp(store) {
+
+  service.interceptors.request.use(config => {
+    if (typeof window === 'undefined') {
+      config.headers.cookie = store.state.option.cookies + '; ' + store.state.option.sessionId
+      config.headers['User-Agent'] = Vue.$store.state.option.userAgent
+      config.url = process.env.baseUrl + config.url
+    } else {
+      // console.log(store)
+    }
+    return config
+  }, error => {
+    return Promise.reject(error)
+  })
+
+  service.interceptors.response.use(response => {
+    const cookies = response.headers['set-cookie']
+    if (cookies && cookies.length) {
+      for (let i = 0; i < cookies.length; i++) {
+        if (cookies[i].indexOf('JSESSIONID') > -1) {
+          const sessionId = cookies[i]
+          const first = sessionId.indexOf(';')
+          const second = sessionId.lastIndexOf(';')
+          const newSessionId = sessionId.replace(sessionId.substring(first, second), '')
+          store.commit('option/SET_SESSION_ID', newSessionId)
+          break
+        }
+      }
+    }
+    return response
+  }, error => {
+    return Promise.reject(error)
+  })
+
+  Vue.prototype.$http = service
+  return service
+
+}
+
+export default function ({ isServer, store, req }) {
+  axiosHttp(store)
+}
+

plugins/axios.js

@@ -1,18 +1,24 @@
 import Vue from 'vue'
 import axios from 'axios'
-import store from '~store'
+
+// const store = required('../store')
 
 const service = axios.create({
   withCredentials: true,
-  baseURL: '/'
+  baseUrl: '/'
 })
 
 service.interceptors.request.use(config => {
+  // console.log(config)
+  // console.log(typeof window)
   // is server render, use ${baseUrl} directly rather than ${proxyUrl}
   if (typeof window === 'undefined') {
     config.url = process.env.baseUrl + config.url
-    config.headers.cookie = store.state.option.cookies + '; ' + store.state.option.sessionId
-    config.headers['User-Agent'] = store.state.option.userAgent
+    // config.headers.cookie = Vue.$store.state.option.cookies + '; ' + Vue.$store.state.option.sessionId
+    // config.headers['User-Agent'] = Vue.$store.state.option.userAgent
+    // config.url = process.env.baseUrl + config.url
+  } else {
+    // console.log(store)
   }
   return config
 }, error => {

plugins/city-service.js

@@ -3,7 +3,7 @@ import store from '~store'
 
 const service = axios.create({
   withCredentials: true,
-  baseURL: '/'
+  baseUrl: '/'
 })
 
 service.interceptors.request.use(config => {

server.js

@@ -1,4 +1,4 @@
-const Nuxt = require('nuxt')
+const { Nuxt, Builder } = require('nuxt')
 const app = require('express')()
 const proxy = require('http-proxy-middleware')
 const cookiejar = require('cookiejar')
@@ -59,15 +59,23 @@ app.use(nuxt.render)
 
 // Build only in dev mode
 if (config.dev) {
-  nuxt.build()
+  new Builder(nuxt).build()
+    .then(listen)
     .catch((error) => {
-      // eslint-disable-line no-console
       console.error(error)
       process.exit(1)
     })
 }
+else {
+  listen()
+}
 
+function listen() {
+  // Listen the server
+  app.listen(port, '0.0.0.0')
+  console.log('Server listening on `localhost:' + port + '`.')
+}
 // Listen the server
-app.listen(port)
+// app.listen(port)
 // eslint-disable-line no-console
 // console.log(`Nuxt.js SSR Server listening on ${host} : ${port}, at ${new Date().toLocaleString()} \nusing api ${config.env.baseUrl}`)

store/index.js

@@ -1,11 +1,15 @@
-import axios from '~plugins/axios'
+import { axiosHttp } from '~plugins/axios-nuxt'
 import cityService from '~plugins/city-service'
-
+const axios = axiosHttp()
 export const actions = {
   // 全局服务初始化
-  nuxtServerInit (store, { params, route, isDev, isServer, req }) {
+  nuxtServerInit (store, context) {
+    // console.log(axios)
     // 检查设备类型
-    const userAgent = isServer ? req.headers['user-agent'] : navigator.userAgent
+    const route = context.route
+    const isServer = context.isServer
+    const isDev = context.isDev
+    const userAgent = isServer ? req.headers['user-agent'] :context.req.headers['user-agent']
     const isMobile = /(iPhone|iPad|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(userAgent)
     const cookie = isServer ? req.headers['cookie'] : null
     store.commit('option/SET_MOBILE_LAYOUT', isMobile)

store/option.js

@@ -1,7 +1,7 @@
 /*
  * 全局设置
  */
-export const state = {
+export const state = () => ({
   userAgent: '',
   // 是否移动端
   isMobile: false,
@@ -35,7 +35,7 @@ export const state = {
     fetching: false,
     data: {}
   }
-}
+})
 
 export const mutations = {
   SET_USER_AGENT (state, result) {