vue ssr 项目改造经历

vue ssr 项目改造经历

由于工作项目需求，需要将原有的项目改造，vue ssr 没有用到nuxt,因为vue ssr更利于seo,没办法，一个小白的改造经历，

首先说明一下，小白可以借鉴，高手也可以点评一下，因为，我写的不一定准确，只是针对我的项目。

下面先说一下大致：

原有项目有用到element,在改造ssr过程中，是很坑的。如果可以的话，还是强烈建议你重新改写成nuxt项目。由于我是小白，所以开始时候备份了一下项目，然后开始网上查找相关文章。

1.首先是这位大神的文章https://segmentfault.com/a/1190000012440041，笔名  右三。

2.然后是https://www.cnblogs.com/xiaohuochai/p/9158675.html，一个小火柴项目的改造过程。

3.https://segmentfault.com/a/1190000016637877  ，五步学会基础。

我列举他们三个，是因为，刚开始以为项目直接改改代码就可以，于是按照他们所说改写，发现，处处是坑，总之，他们的说法并不适合我的项目，于是苦思冥想，去看官网，再结合他们文章，开始大刀阔斧改造。

请您备份好：

先上一张原有项目图纸，就是普通的cli2构造出来的，其中theme是element主题，可不用理会。

接下来开始改造：

是不是不可思议，不敢整的，可以看文末怎么解决的一些坑。我接着分析

删除完以后，在build里添加四个文件：

1.    setup-dev-server.js

const path = require(‘path‘)
const webpack = require(‘webpack‘)
const MFS = require(‘memory-fs‘)
const clientConfig = require(‘./webpack.client.config‘)
const serverConfig = require(‘./webpack.server.config‘)

module.exports = function setupDevServer (app, cb) {
  let bundle
  let template

  // 修改客户端配置添加 热更新中间件
  clientConfig.entry.app = [‘webpack-hot-middleware/client‘, clientConfig.entry.app]
  clientConfig.output.filename = ‘[name].js‘
  clientConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )

  const clientCompiler = webpack(clientConfig) // 执行webpack
  const devMiddleware = require(‘webpack-dev-middleware‘)(clientCompiler, {
    publicPath: clientConfig.output.publicPath,
    stats: {
      colors: true,
      chunks: false
    }
  })
  app.use(devMiddleware)

  clientCompiler.plugin(‘done‘, () => {
    const fs = devMiddleware.fileSystem
    // 模板为打包后的html文件
    const filePath = path.join(clientConfig.output.path, ‘index.html‘)
    if (fs.existsSync(filePath)) {
      template = fs.readFileSync(filePath, ‘utf-8‘)
      console.log("执行4")
      if (bundle) {
        console.log("执行1")
        cb(bundle, template)
      }
    }
  })

  app.use(require(‘webpack-hot-middleware‘)(clientCompiler))
  // 监听 server renderer
  const serverCompiler = webpack(serverConfig)
  const mfs = new MFS() // 内存文件系统，在JavaScript对象中保存数据。
  serverCompiler.outputFileSystem = mfs
  serverCompiler.watch({}, (err, stats) => {
    if (err) throw err
    stats = stats.toJson()
    stats.errors.forEach(err => console.error(err))
    stats.warnings.forEach(err => console.warn(err))
    // 读取使用vue-ssr-webpack-plugin生成的bundle（vue-ssr-bundle.json）
    const bundlePath = path.join(serverConfig.output.path, ‘vue-ssr-bundle.json‘)
    bundle = JSON.parse(mfs.readFileSync(bundlePath, ‘utf-8‘))
    console.log("执行3")
    if (template) {
      console.log("执行2")
      cb(bundle, template)
    }
  })
}

2.     webpack.base.config.js

const path = require(‘path‘)
const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘)
const extractCSS = new ExtractTextPlugin(‘stylesheets/[name]-one.css‘);

// 这样我们在开发过程中仍然可以热重载,CSS 提取应该只用于生产环境
const isProduction = process.env.NODE_ENV === ‘production‘

module.exports = {
  devtool: ‘#source-map‘,
  entry: {
    app: ‘./src/entry-client.js‘,
    //app: ["babel-polyfill", "./src/entry-client.js"],///解决ie关键
    vendor: [
      ‘vue‘,
      ‘vue-router‘,
      ‘vuex‘
    ]
  },
  output: {
    path: path.resolve(__dirname, ‘../dist‘),
    publicPath: ‘/dist/‘,
    filename: ‘[name].[chunkhash].js‘
  },
  resolve: {
    alias: {
      ‘static‘: path.resolve(__dirname, ‘../static‘),
      // ‘@‘: path.resolve(‘src‘),
    }
  },
  module: {
    noParse: /es6-promise\.js$/, // avoid webpack shimming process
    rules: [
      {
        test: /\.vue$/,
        loader: ‘vue-loader‘,
        options: {
          extractCSS: isProduction,
          preserveWhitespace: false,
          postcss: [
            require(‘autoprefixer‘)({
              browsers: [‘last 3 versions‘]
            })
          ]
        }
      },

      {
        test: /\.js$/,
        loader: ‘buble-loader‘,
        exclude: /node_modules/,
        options: {
          objectAssign: ‘Object.assign‘
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: ‘url-loader‘,
        options: {
          limit: 10000,
          name: ‘[name].[ext]?[hash]‘
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: ‘url-loader‘,
        query: {
          limit: 10000,
          name: ‘fonts/[name].[hash:7].[ext]‘
        }
      },
      {
        test: /\.css$/,
        use: isProduction
          ? ExtractTextPlugin.extract({
            use: ‘css-loader‘,
            fallback: ‘vue-style-loader‘
          })
          : [‘vue-style-loader‘, ‘css-loader‘]
      }
    ]
  },
  plugins: isProduction
    // 确保添加了此插件！
    ? [new ExtractTextPlugin({ filename: ‘common.[chunkhash].css‘ })]
    : [],
  performance: {
    hints: process.env.NODE_ENV === ‘production‘ ? ‘warning‘ : false,
    maxAssetSize: 30000000, // 整数类型（以字节为单位）
    maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
    assetFilter: function(assetFilename) {
      // 提供资源文件名的断言函数
      return assetFilename.endsWith(‘.css‘) || assetFilename.endsWith(‘.js‘);
    }

  }
}

3.     webpack.client.config.js

const webpack = require(‘webpack‘)
const merge = require(‘webpack-merge‘)
const base = require(‘./webpack.base.config‘)
const HTMLPlugin = require(‘html-webpack-plugin‘)
const SWPrecachePlugin = require(‘sw-precache-webpack-plugin‘)

const config = merge(base, {
  plugins: [
    // 全局变量
    new webpack.DefinePlugin({
      ‘process.env.NODE_ENV‘: JSON.stringify(process.env.NODE_ENV || ‘development‘),
      ‘process.env.VUE_ENV‘: ‘"client"‘
    }),
    // 将依赖模块提取到 vendor chunk 以获得更好的缓存，是很常见的做法。
    new webpack.optimize.CommonsChunkPlugin({
      name: ‘vendor‘,
      minChunks: function (module) {
        return (
          // 如果它在 node_modules 中
          /node_modules/.test(module.context) &&
          // 如果 request 是一个 CSS 文件，则无需外置化提取
          !/\.css$/.test(module.request)
        )
      }
    }),
    // 提取 webpack 运行时和 manifest
    new webpack.optimize.CommonsChunkPlugin({
      name: ‘manifest‘
    }),
    // html模板
    new HTMLPlugin({
      template: ‘index.html‘
    })
  ]
})

if (process.env.NODE_ENV === ‘production‘) {
  config.plugins.push(
    // 生产环境下 - 压缩js
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    // 用于使用service worker来缓存外部项目依赖项。
    new SWPrecachePlugin({
      cacheId: ‘vue-hn‘,
      filename: ‘service-worker.js‘,
      dontCacheBustUrlsMatching: /./,
      staticFileGlobsIgnorePatterns: [/index\.html$/, /\.map$/]
    })
  )
}

module.exports = config

4.    webpack.server.config.js

const webpack = require(‘webpack‘)
const merge = require(‘webpack-merge‘)
const base = require(‘./webpack.base.config‘)
const VueSSRPlugin = require(‘vue-ssr-webpack-plugin‘)
const nodeExternals = require(‘webpack-node-externals‘)

module.exports = merge(base, {
  target: ‘node‘,
  entry: ‘./src/entry-server.js‘,
  devtool: ‘source-map‘,
  output: {
    filename: ‘server-bundle.js‘,
    libraryTarget: ‘commonjs2‘
  },

  externals: nodeExternals({
    // do not externalize CSS files in case we need to import it from a dep
    whitelist: /\.css$/,
    "jquery": "$",
    ‘Vue‘: true,
    ‘VueLazyload‘: true,
    ‘$‘: true,
    ‘vue-router‘: ‘VueRouter‘,
    ‘vuex‘:‘Vuex‘,
    ‘axios‘: ‘axios‘,
    // ‘element-ui‘:‘ELEMENT‘,
  }),
  plugins: [
    new webpack.DefinePlugin({
      ‘process.env.NODE_ENV‘: JSON.stringify(process.env.NODE_ENV || ‘development‘),
      ‘process.env.VUE_ENV‘: ‘"server"‘
    }),
    /*
    使用webpack按需代码分割的特性的时候（require.ensure或动态import）结果就是服务端bundle会包含很多分开的文件。
    ‘vue-ssr-webpack-plugin‘作用是将其打包为一个单独的JSON文件，这个文件可以传入到bundleRenderer中(server.js)，可以极大地简化了工作流。
    默认文件名为 `vue-ssr-server-bundle.json`，也可以参数形式传入其他名称
    */
    new VueSSRPlugin()
  ]
})

加完这些，大概是这样子

显然，加如这些不够。

我们还需要在根目录添加

server.js

const fs = require(‘fs‘)
const path = require(‘path‘)
const express = require(‘express‘)
const compression = require(‘compression‘) // 开启gzip压缩
const resolve = file => path.resolve(__dirname, file)

const isProd = process.env.NODE_ENV === ‘production‘
const serverInfo = `express/${require(‘express/package.json‘).version} ` +
  `vue-server-renderer/${require(‘vue-server-renderer/package.json‘).version}`
const app = express()
function createRenderer (bundle, template) {
  return require(‘vue-server-renderer‘).createBundleRenderer(bundle, {
    template, // 缓存
    cache: require(‘lru-cache‘)({
      max: 1000,
      maxAge: 1000 * 60 * 15
    })
  })
}
let renderer
if (isProd) {
  const bundle = require(‘./dist/vue-ssr-bundle.json‘)
  const template = fs.readFileSync(resolve(‘./dist/index.html‘), ‘utf-8‘)
  renderer = createRenderer(bundle, template)
} else {
  require(‘./build/setup-dev-server‘)(app, (bundle, template) => {
    renderer = createRenderer(bundle, template)
  })
}
const serve = (path, cache) => express.static(resolve(path), {
  maxAge: cache && isProd ? 60 * 60 * 24 * 30 : 0 // 静态资源设置缓存
})

app.use(compression({ threshold: 0 })) // gzip压缩
app.use(‘/dist‘, serve(‘./dist‘, true)) // 静态资源
app.use(‘/static‘, serve(‘./static‘, true)) // 静态资源 （如：http://localhost:8080/public/logo-120.png）
app.use(‘/manifest.json‘, serve(‘./manifest.json‘, true))
app.use(‘/service-worker.js‘, serve(‘./dist/service-worker.js‘))

app.get(‘*‘, (req, res) => {
  if (!renderer) {
    return res.end(‘未渲染成功||wei cheng gong‘)
  }
  const s = Date.now()
  res.setHeader("Content-Type", "text/html")
  res.setHeader("Server", serverInfo)
  const errorHandler = err => {
    if (err && err.code === 404) {
      console.log(404)
      res.status(404).end(‘404 | Page Not Found‘)
    } else {
      res.status(500).end(‘500 | Internal Server Error‘)
      console.error(`error during render : ${req.url}`)
      console.error(err)
    }
  }

  var title = ‘测试-首页‘ // 自定义变量（此处用于title）
  var author =‘Anne‘ // 默认author
  var keywords =‘我是keywords‘ // 默认keywords
  var description =‘我是description‘ //默认description
  renderer.renderToStream({title,author,keywords,description, url: req.url})

    .on(‘error‘, errorHandler)
    .on(‘end‘, () => console.log(`整体请求: ${Date.now() - s}ms`))
    .pipe(res)
})

const port = process.env.PORT || 3026

app.listen(port, () => {
  console.log(`localhost:${port}`)
})

在src目录下还有俩：

这里注意一下我的入口文件为main.js。

app.js和utils.js文件夹，可不用理会，是项目单分出来的接口文件用axio。我们获取数据接口将在vuex里面写。也就是store文件夹。

entry-client.js:

// entry-client.js 客户端渲染入口文件
import Vue from ‘vue‘
import { app, store, router } from ‘./main‘

/*Vue-SSR 根据访问的路由会调用当前路由组件中的asyncData方法由服务端调用相关接口，根据数据
生成首屏对应的html，并在返回的html中写入 window.__INITIAL_STATE__ = {服务端请求到的数据}
不需要服务端渲染的数据则在 mounted 中请求接口。*/

/*路由切换时组件的asyncData方法并不会被调用，若该组件存在服务端渲染方法asyncData，可通过下面
三种方式客户端调用，并进行客户端渲染*/

//（1）
// 全局mixin，beforeRouteEnter，切换路由时，调用asyncData方法拉取数据进行客户端渲染
// 注意beforeRouteEnter无法直接获取到当前组件this，需使用next((vm)=>{ vm即为this }) 获取

/*Vue.mixin({
  beforeRouteEnter (to, from, next) {
    console.log(‘beforeRouteEnter1‘)
    next((vm)=>{
        const {asyncData} = vm.$options
    console.log(‘beforeRouteEnter1‘+ asyncData)
        if (asyncData) {
            asyncData(vm.$store, vm.$route).then(next).catch(next)
        } else {
            next()
        }
    })

  }
})*/

//（2）
// 全局mixin，beforeRouteUpdate，切换路由时，调用asyncData方法拉取数据进行客户端渲染
// beforeRouteUpdate可直接获取到this对象（2.2版本以上）
/*Vue.mixin({
  beforeRouteUpdate (to, from, next) {
    console.log(‘beforeRouteUpdate2‘)
    const { asyncData } = this.$options
    if (asyncData) {
        // 传入store与route
        asyncData(this.$store, this.$route).then(next).catch(next)
    } else {
        next()
    }
  }
})*/

// （3）
// 注册全局mixin，所有组件beforeMount时，如果根组件_isMounted为真（即根实例已mounte，该钩子函数是由路由跳转触发的）
// 调用asyncData方法拉取数据进行客户端渲染
Vue.mixin({
  data(){ //全局mixin一个loading
    return {
      //loading:false
    }
  },
  beforeMount () {
    const { asyncData } = this.$options;
    let data=null; //把数据在computed的名称固定为data,防止重复渲染
    try{
      data=this.data; //通过try/catch包裹取值,防止data为空报错
    }catch(e){}
    if(asyncData&&!data){ //如果拥有asyncData和data为空的时候,进行数据加载
      //触发loading加载为true,显示加载器不显示实际内容
      //this.loading=true;
      //为当前组件的dataPromise赋值为这个返回的promise，通过判断这个的运行情况来改变loading状态或者进行数据的处理 (在组件内通过this.dataPromise.then保证数据存在)
      this.dataPromise=asyncData({store,route:router.currentRoute})
      // this.dataPromise.then(()=>{
      //   //this.loading=false;
      // }).catch(e=>{
      //  // this.loading=false;
      // })
    }else if(asyncData){
      //如果存在asyncData但是已经有数据了,也就是首屏情况的话返回一个成功函数,防止组件内因为判断then来做的操作因为没有promise报错
      this.dataPromise=Promise.resolve();
    }
  }
})
// 使用 window.__INITIAL_STATE__ 中的数据替换store中的数据
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

router.onReady(() => {
  app.$mount(‘#app‘)
})

entry-server.js:

// entry-server.js
import { app, router, store } from ‘./main‘

const isDev = process.env.NODE_ENV !== ‘production‘ // 开发模式 || 生产模式
export default context => {
  const s = isDev && Date.now()

  // 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
  // 以便服务器能够等待所有的内容在渲染前，
  // 就已经准备就绪。
  return new Promise((resolve, reject) => {
    console.log(context)
    // push对应访问路径
    router.push(context.url)

    // 等到 router 将可能的异步组件和钩子函数解析完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents() // 返回当前路径匹配到的组件

      // 匹配不到的路由，reject()，返回 404
      if (!matchedComponents.length) {
        reject({ code: 404 })
      }
      // Promise.all 组件的 asyncData 方法 拿数据 全部数据返回后 为window.__INITIAL_STATE__赋值并 resolve(app)
      Promise.all(matchedComponents.map(component => {
        if (component.asyncData) {
          return component.asyncData({store, route: router.currentRoute})
        }
      }))
        .then(() => {
          isDev && console.log(`数据预取: ${Date.now() - s}ms`)
          context.state = store.state
          resolve(app)
        }).catch(reject)
    })

  })
}

同时main.js也需要改：

import Vue from ‘vue‘

import App from ‘./App.vue‘

import { createRouter } from ‘./router/index‘
import { createStore } from ‘./store/index‘
import {sync} from ‘vuex-router-sync‘

//时间过滤器
import ‘./utils/jsontime.js‘
//title
//import titleMixin from ‘./utils/title‘
//ie
//import ‘babel-polyfill‘
require("babel-polyfill");
import axios from ‘axios‘
import VueAxios from ‘vue-axios‘
//import Vuex from‘vuex‘
//import MetaInfo from ‘vue-meta-info‘

Vue.prototype.filterHtml = function (msg) {
  if (msg) {
    return msg.replace(/<img/g, "<img style=‘max-width: 800px;max-height: 500px;margin:10px 30px;‘")
  }
  return ‘‘
};

if (typeof window !== ‘undefined‘) {
  require(‘element-ui/lib/theme-chalk/index.css‘);
  const ElementUI = require(‘element-ui‘);
  Vue.use(ElementUI);
}
// if (process.browser) {
//   //console.log(‘浏览器端渲染‘);
//   Vue.use(require(‘element-ui‘),require(‘element-ui/lib/theme-chalk/index.css‘))
// } else {
//   //console.log("非浏览器端渲染");
// }

Vue.config.productionTip = false;
//Vue.mixin(titleMixin),
// Vue.use(Vuex);
  Vue.use(VueAxios, axios);
//Vue.use(MetaInfo);

const router = createRouter();
const store = createStore();
sync(store, router);

const app = new Vue({
  router,
  store,
  render: h => h(App)
});

export { app, router, store }

这里主要部分还是这几句：其他的一会简单说明，

import Vue from ‘vue‘
import App from ‘./App.vue‘
import { createRouter } from ‘./router/index‘
import { createStore } from ‘./store/index‘
import {sync} from ‘vuex-router-sync‘

Vue.config.productionTip = false;
const router = createRouter();
const store = createStore();
sync(store, router);
const app = new Vue({
  router,
  store,
  render: h => h(App)
});
export { app, router, store }

还有一个文件：差点忘了那个模板index,html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>{{title}}</title>
  <meta name="keywords" content=‘{{keywords}}‘>
  <meta name="description" content=‘{{description}}‘>
  <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">

  <style>
    .Tmain{
      margin: 0px;
    }
  </style>
</head>
<body class="Tmain">
 <!--vue-ssr-outlet-->
</body>
</html>

接下来看路由文件：router/index.js

import Vue from ‘vue‘
import Router from ‘vue-router‘

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: ‘history‘,
    routes: [
      {
        path: ‘/‘, name: ‘index‘,
        component: () =>import(‘../views/index.vue‘)
      },
      {
        path: ‘/articlex/:id‘, name: ‘articlex‘,
        component: resolve => require([‘../views/main/article/articlex.vue‘], resolve)
      },
      {path: "*", redirect: "/"}
    ]
  })
}

这里第一个路由是ssr的异步加载，第二个为懒加载写法，第三个为404，返回到原页面。

还有store/index.js文件，问什么把这个放到最后呢，因为这个文件可以模块化，也可以写到一个里。

在一个里面写：

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import axios from ‘axios‘

Vue.use(Vuex)

// 数据
let state = {
  lists: [], // 文章列表
  detail: {} // 文章详情
}

// 事件
let actions = {
  // 获取文章列表
  fetchLists ({ commit }, data) {
    return axios.get(‘https://xxxx/api/v1/topics?page=‘ + data.page)
    .then((res) => {
      if (res.data.success) {
        commit(‘setLists‘, res.data.data)
      }
    })
  },
  // 获取文章详情
  fetchDetail ({ commit }, data) {
    return axios.get(‘https://xxxx/api/v1/topic/‘ + data.id)
    .then((res) => {
      if (res.data.success) {
        commit(‘setDetail‘, res.data.data)
      }
    })
  }
}

// 改变
let mutations = {
  setLists (state, data) {
    state.lists = data
  },
  setDetail (state, data) {
    state.detail = data
  }
}

// 获取
let getters = {
  getLists: state => {
    return state.lists
  },
  getDetail: state => {
    return state.detail
  }
}

export function createStore () {
  return new Vuex.Store({
    state,
    actions,
    mutations,
    getters
  })
}

在模块化的话结构这样：

index.js:

import Vue from ‘vue‘
import vuex from ‘vuex‘
import user from ‘./modules/user‘
import getters from ‘./getters‘

Vue.use(vuex);
export function createStore() {
  return new vuex.Store({
    modules: {
      user,
    },
    getters
  });

}

getters.js

const getters = {
  lists: state => state.user.lists,
  detail: state => state.detail,

};
export default getters

modules/user.js

import axios from ‘axios‘

const user = {
  state: {
    lists: [],
    detail:{},
  },

  mutations: {
    SET_LISTS: (state, lists) => {
      state.lists = lists;
    },
    SET_DETAIL: (state, detail) => {
      state.detail = detail;
    },

  },

  actions: {

// 获取文章列表
  fetchLists ({ commit }, data) {
    return axios.get(‘https://XXX/api/v1/topics?page=‘ + data.page)
    .then((res) => {
      if (res.data.success) {
        commit(‘SET_LISTS‘, res.data.data)
      }
    })
  },
  // 获取文章详情
  fetchDetail ({ commit }, data) {
    return axios.get(XXXX/api/v1/topic/‘ + data.id)
    .then((res) => {
      if (res.data.success) {
        commit(‘SET_DETAIL‘, res.data.data)
      }
    })
  }
}

    // 前端 登出
    FedLogOut({commit}) {
      return new Promise(resolve => {
        commit(‘SET_LISTS‘, "");
        commit(‘SET_DETAIL‘, "");
        resolve();
      });
    },
  }
};

export default user;

写到这也算完成一半多了，继续往下看

一个页面怎么才算是开始渲染，用到了asyncData,

由于项目保密原因我只展示一页内容仅供参考：index.vue

<template>
    <div>
        {{lists.id}}
    </div>
</template>
<script>
    import axios from ‘axios‘
    export default {
        /**
         * [SSR获取所有组件的asyncData并执行获得初始数据]
         * @param  {[Object]} store [Vuex Store]
         * 此函数会在组件实例化之前调用，所以它无法访问 this。需要将 store 和路由信息作为参数传递进去：
         */
        asyncData (store, route) {
            return store.dispatch(‘fetchLists‘ ) // 服务端渲染触发
        },
        name: "home",
        // 数据
        data() {
            return {

            }
        },
        // 计算属性
        computed: {
               lists () {
               return this.$store.getters.lists // 文章列表
              },
        },

        mounted() {

        },
        // 方法
        methods: {

        },
        // 子组件
        components: {
        }
    }
</script>
<!--当前组件的样式 -->
<style scoped>

</style>

最后启动了,改为

package.json

 "scripts": {
    "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"
  },

// 安装依赖包
npm install
// 开发模式
npm run dev
// 生产模式
npm run build
npm run start

这样，就算是结束一个简单的渲染了，下面我将介绍我在开发中遇到的问题以及解决方法：

由于重新写完发现@不好使了，没太深究直接../../绝对路径。

如果少个依赖，看报错信息《Can‘t find xxxx  dependence》。

我这里大致总结了写=些，项目直接码上：

npm install -g npm （更新npm）

npm i vue-server-renderer(一定要和vue版本一致，别问为啥，官方大大)

npm install babel-plugin-component --save-dev(element)

npm i axios buble buble-loader compression cross-env es6-promise express http-proxy-middleware lru-cache serve-favicon sw-precache-webpack-plugin vue-ssr-webpack-plugin vue-style-loader vuex vuex-router-sync webpack-hot-middleware webpack-merge webpack-node-externals

(lru-cache4.0.2,这个插件报错，就换这个版本)

npm install --save babel-polyfill   (ie兼容)

1.    npm i element-ui -S

2.    main.js里这样引入就可以了。原因自己猜去吧

if (typeof window !== ‘undefined‘) {
  require(‘element-ui/lib/theme-chalk/index.css‘);
  const ElementUI = require(‘element-ui‘);
  Vue.use(ElementUI);
}
// if (process.browser) {
//   //console.log(‘浏览器端渲染‘);
//   Vue.use(require(‘element-ui‘),require(‘element-ui/lib/theme-chalk/index.css‘))
// } else {
//   //console.log("非浏览器端渲染");
// }

首页模板index.html 添加

<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.

npm install --save babel-polyfill

main.js里加

require("babel-polyfill");//或者import "babel-polyfill";//注意放的位置

webpack.base.config.js里加

module.exports = {

　　entry: ["babel-polyfill", "./app/js"]

};

asyncData ({ store , route }) {
let data1= Promise.all([
  store.dispatch(‘ghnavList‘),
  store.dispatch(‘gxnavList‘),
  store.dispatch(‘getdonglist‘,{artdongid:21}),
  store.dispatch(‘getyoulist‘,{artyouid:22}),
  store.dispatch(‘getzhilist‘,{artzhiid:23})
    ])
 return data1
},

6.第一次完成项目的时候，发现页面渲染了两次，就是一个页面显示两个一样的版块，很是揪心，于是我将index.html里的文件搞成这样：

<body >
<div id="app">
 <!--vue-ssr-outlet-->
</div>
</body>

指标不治本，下次完善。

还是墨迹那句话，希望有更多的人支持我，点个关注。我会努力发表更好的文章

QQ:1763907618------备注：博客园

原文地址：https://www.cnblogs.com/wangyongping/p/10961587.html