vue ssr服务端渲染(小白解惑) - javascript

>³õÑ§ssrÈë¿Ó

³õÑ§vue·þÎñ¶ËäÖÈ¾ÒÉ»ó·Ç³£¶à£¬ÎÒÃÇ´ó²¿·ÖÇ°¶Ë¶¼ÊÇ°ëÂ·³ö¼Ò£¬ÉÏÊÖ¶¼ÊÇÇ°ºó¶Ë·ÖÀë£¬¶Ô·þÎñ¶Ë²¢²»ÁË½â£¬²»Ëµjava¡¢phpÓïÑÔÁË£¬Á¬node·þÎñ¶¼»¹Ã»¸ãÃ÷°×£¬Àí½â·þÎñ¶ËäÖÈ¾»¹ÊÇÓÐÐ©À§ÄÑµÄ£»

ÍøÉÏÓÐ·Ç³£¶àµÄvue·þÎñäÖÈ¾µÄÈëÃÅ°¸Àý£¬µ«¿´ÁËºÜ¾Ã£¬ºÜ¶à£¬»¹ÊÇÒ»Í·ÎíË®£¬¸ã²»Ã÷°×ÕâÐ©ÎÄ¼þºÍ¹Ø¼ü×ÖµÄÁªÏµºÍÒâË¼£º

server.js
entrt-client.js
server-js
built-server-bundle.js
vue-ssr-server-bundle.json
vue-ssrclientmanifest.json
createBundleRenderer
clientManifest

ÕâÆªÄÚÈÝ»á°´ÕÕ »ù´¡·þÎñ¶ËäÖÈ¾--vueÊµÀýäÖÈ¾--¼ÓÈëvueRouter--¼ÓÈëvueXµÄË³ÐòÈë¿Ó£¬ºóÐøÓ¦¸Ã»¹ÓÐ--¿ª·¢Ä£Ê½--seoÓÅ»¯--²¿·ÖäÖÈ¾£¬ÕâÀïÏÈ²»ÍÚÄÇÃ´¶à¿ÓÁË£»

>»ù´¡·þÎñ¶ËäÖÈ¾

¹ËÃûË¼Òå£¬µÃÆô¸ö·þÎñ£º(½¨¸öÐÂÏîÄ¿£¬²»ÒªÓÃvue-cli)

//server.js
const express = require('express');
const chalk = require('chalk');//¼Ó¸öchalk¾ÍÊÇconsoleºÃ¿´µã¡£¡£

const server = express();

server.get('*', (req, res) => {
res.set('content-type', "text/html");
res.end(`
<!DOCTYPE html>
<html lang="en">
 <head><title>Hello</title></head>
 <body>ÄãºÃ</body>
</html>
`)
})

server.listen(8080,function(){
let ip = getIPAdress();
console.log(`·þÎñÆ÷¿ªÔÚ£ºhttp://${chalk.green(ip)}:${chalk.yellow(8080)}`)
})

function getIPAdress(){//nodeÏÂµÄosÄ£¿é¿ÉÒÔÄÃµ½Æô¶¯¸ÃÎÄ¼þµÄ·þÎñ¶ËµÄ²¿·ÖÐÅÏ¢
var interfaces = require('os').networkInterfaces();
for (var devName in interfaces) {
 var iface = interfaces[devName];
 for (var i = 0; i < iface.length; i++) {
  var alias = iface[i];
  if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
   return alias.address;
  }
 }
}
}

Æô¶¯ node server.js

ÔÙ¿´Ò³Ãæ Õý³££¬Õâ¾ÍÊÇ×î»ù´¡µÄ·þÎñ¶ËäÖÈ¾

ÆäÊµ¾ÍÊÇÒ»¸ögetÇëÇó£¬·µ»ØÒ»¸ö×Ö·û´®£¬ä¯ÀÀÆ÷Ä¬ÈÏÕ¹Ê¾·µ»Ø½á¹û£»

È»¶ø¶ÔÓÚÕâ¸ö×Ö·û´®µÄ½âÎö»¹²»Ã÷È·£¬Ê²Ã´ÒâË¼£¬±ÈÈç£º

È¥µôÕâ¾ä»°£¬Ò³Ãæ¾Í³ÉÁËÕâÑù£¬ÔÒò²»Éî¾¿£¬×Ô¼º°Ù¶È

>¼ÓÈëvueÊµÀý

Ìø¹ý¹ÙÍøËµµÄbuilt-server-bundle.jsÓ¦ÓÃ£¬ÒâË¼¾ÍÊÇ²»ÓÃ¹ÜÕâ¸öÎÄ¼þÁË£¬Ö»ÊÇÒ»¸ö¹ý¶ÉÎÄ¼þ£¬ÏîÄ¿ÖÐÒ²²»»áÓÃµ½¡£Ö±½ÓÊ¹ÓÃcreateBundleRenderer·½·¨£¬Ö±½ÓÓÃvue-ssr-server-bundle.json£»

¿´ÏÂÏÖÔÚµÄÄ¿Â¼½á¹¹£º

ÐÂÔöÁË5¸öÎÄ¼þ£»ÓÐ¹Ø¿Í»§¶ËµÄÅäÖÃentry-client.js²»ÊÇ±ØÐëµÄ£¬ÕâÀïÏÈ²»¹Ü£»

app.jsÊÇÓÃÀ´´´½¨vueÊµÀýµÄ£»

entry-server.jsÊÇÓÃÀ´´´½¨Éú³Évue-ssr-server-bundle.json£¨ÐèÒªÓÃµ½app.js£©ËùÐèµÄÅäÖÃÅä¼þ£»ÊÇ¸øwebpack.server.config.jsÓÃµÄ£»

webpack.server.config.jsÊÇÓÃÀ´Éú³Évue-ssr-server-bundle.jsonµÄ£»

vue-ssr-server-bundle.jsonÊÇ¸øserver.jsÖÐµÄcreateBundleRendererÓÃµÄ¡£

//app.js 
import Vue from 'vue'
import Vue from './App.vue'//ÕâÀïÒ»¶¨ÒªÐ´ÉÏ.vue,²»È»»áÆ¥Åäµ½app.js,require²»Çø·Ö´óÐ¡Ð´0.0
export default createApp=function(){
return new Vue({
 render:h => h(App)
})
}

Ò»¸öcreateAppÉú³ÉÒ»¸övueÊµÀý£»

//App.vue
<template>
<div id='app'>
 ÕâÊÇ¸öapp
</div>
</template>
<script>
export default {}
</script>

»¹Ã»ÓÃµ½<router-view>

//weback-base.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
output:{
 path:path.resolve(__dirname,'./dist'),
 filename:'build.js',
},
module: {
 rules: [
  {
   test:/\.js$/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env']
    }
   },
   exclude:[/node_modules/,/assets/]
  },
  {
   test:/\.vue$/,
   use:['vue-loader']
  }
 ]
},
resolve: {
 alias:{
  '@':path.resolve(__dirname,'../')
 },
 extensions:['.js','.vue','.json']
},
plugins:[
 new VueLoaderPlugin()
]
}

ÓÐ¹ØwebpackÅäÖÃ²»†ªàÂ

//webpack.server.config.jsÓÃÀ´Éú³Évue-ssr-server-bundle.json
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(baseConfig, {
 entry: './entry-server.js',

 // ÕâÔÊÐí webpack ÒÔ Node ÊÊÓÃ·½Ê½(Node-appropriate fashion)´¦Àí¶¯Ì¬µ¼Èë(dynamic import)£¬
 // ²¢ÇÒ»¹»áÔÚ±àÒë Vue ×é¼þÊ±£¬
 // ¸æÖª `vue-loader` ÊäËÍÃæÏò·þÎñÆ÷´úÂë(server-oriented code)¡£
 target: 'node',

 // ¶Ô bundle renderer Ìá¹© source map Ö§³Ö
 devtool: 'source-map',

 // ´Ë´¦¸æÖª server bundle Ê¹ÓÃ Node ·ç¸ñµ¼³öÄ£¿é(Node-style exports)
 output: {
 libraryTarget: 'commonjs2'
 },


 // ÕâÊÇ½«·þÎñÆ÷µÄÕû¸öÊä³ö
 // ¹¹½¨Îªµ¥¸ö JSON ÎÄ¼þµÄ²å¼þ¡£
 // Ä¬ÈÏÎÄ¼þÃûÎª `vue-ssr-server-bundle.json`
 plugins: [
 new VueSSRServerPlugin()
 ]
})

Õâ¸öÅäÖÃÄÄ¶¼ÄÜÕÒµ½£¬ÖØµãÊÇVueSSRServerPluginÕâ¸ö²å¼þ£¬Éú³Évue-ssr-server-bundle.jsonÈ«¿¿Ëü£¬È¥µôµÄ»°Éú³ÉµÄÊÇbuilt-server-bundle.js£»¹ØÓÚmerge²å¼þ£¬libraryTarget,targetÅäÖÃÎÊÌâ×Ô¼º°Ù¶ÈwebpackÈ¥0.0£»

//entry-server.js
import { createApp } from './src/app'

export default context => {
 return createApp()
}

¹Ì¶¨Ð´·¨£¬·µ»ØÒ»¸öº¯Êý¹©createBundleRendererÊ¹ÓÃ£»

Éú³Évue-ssr-server-bundle.json

µ½Ä¿Ç°ÎªÖ¹°²×°µÄ²å¼þÓÐ£º

×Ô¼ºÊÖ¶¯Ò»¸öÒ»¸ö×°¾ÍÐÐÁË¡£

Éú³Évue-ssr-server-bundle.json£¬Ê¹ÓÃwebpackÃüÁî

Ò»ÇÐ¶¼ÊÖ¶¯£¬ÊìÏ¤webpack;

ÐÞ¸Äserver.js

const express = require('express');
const chalk = require('chalk');

const server = express();
const serverBundle = require('./dist/vue-ssr-server-bundle.json')//**ÐÂÔö**//
const renderer = require('vue-server-renderer').createBundleRenderer(serverBundle,{
 runInNewContext: false, // ¿´Ãû×ÖÒ²ÖªµÀÊÇÉú³ÉÄ³¸öÐÂµÄContext¶ÔÏó,Ä¬ÈÏÊÇtrue,¸Ä³ÉfalseÀí½âÎªÄ³ÖÖ»º´æ»úÖÆ£¬Ìá¸ß·þÎñÆ÷Ð§ÂÊ
 template: require('fs').readFileSync('./index.html', 'utf-8'),
 })//**ÐÂÔö**//
server.get('*', (req, res) => {
 //res.set('content-type', "text/html");
 //res.end(`
 //<!DOCTYPE html>
 //<html lang="en">
 // <head><title>Hello</title></head>
 // <body >
 // <div style='color:red'>ÄãºÃ</div>
 // </body>
 // </html>
 //¸Ä³ÉÏÂÃæÕâÑù
 const context = {//ÕâÀïµÄ²ÎÊýÏÖÔÚ»¹Ã»ÓÃ£¬µ«Õâ¸ö¶ÔÏó»¹ÊÇµÃÓÃ£¬Òª×örenderToStringµÄ²ÎÊý
 url:req.url
 }
 renderer.renderToString(context, (err, html) => {
  if (err) {
  res.status(500).end('Internal Server Error')
  return
  } else {
  res.end(html)
  }
 })
 `)
 })

server.listen(8080,function(){
 let ip = getIPAdress();
 console.log(`·þÎñÆ÷¿ªÔÚ£ºhttp://${chalk.green(ip)}:${chalk.yellow(8080)}`)
})

function getIPAdress(){//nodeÏÂµÄosÄ£¿é¿ÉÒÔÄÃµ½Æô¶¯¸ÃÎÄ¼þµÄ·þÎñ¶ËµÄ²¿·ÖÐÅÏ¢£¬Ï¸½Ú×Ô¼ºÈ¥nodeÉÏÃæ²é
 var interfaces = require('os').networkInterfaces();
 for (var devName in interfaces) {
  var iface = interfaces[devName];
  for (var i = 0; i < iface.length; i++) {
   var alias = iface[i];
   if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
    return alias.address;
   }
  }
 }
}

ÊÔÒ»¸ò£ºnode server.js

Õý³££¬¼ýÍ·Ö¸µÄµØ·½¹ÙÍøÓÐ½âÊÍ¡£±ðÍüÁËinde.htmlÖÐ¼ÓÈëÒ»ÐÐ×¢ÊÍ£º

ºóÐøÐÞ¸Ätitle,metaÍ·²¿¶¼ÊÇÍ¨¹ýÀàËÆµÄ×¢ÊÍ·½Ê½£¬ÔÀí¾ÍÊÇÕýÔòÆ¥ÅäÌæ»»×Ö·û´®-¡£-£»

>¼ÓÈëÂ·ÓÉvue-router

ÐÂÔö¼¸¸öÎÄ¼þ

ÐèÒªÐÞ¸ÄµÄÎÄ¼þÓÐ£º

App.vue//¼Ó¸örouter-view¾ÍÐÐ

//app.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
export function createApp(){
 const app = new Vue({
  router,
  render:h => h(App)
 })
 return {app,router}
}

°ÑappÊµÀýºÍrouter¶¼Å×³öÈ¥£¬¸øentry-server.jsÓÃ

// entry-server.js
import { createApp } from './src/app'

export default context => {
 //ÕâÀïÓÃpromiseµÄÔÒòÓÐºÜ¶à£¬ÆäÖÐÓÐÒ»¸ö¾ÍÊÇÏÂÃæÕâ¸öonReady·½·¨ÊÇÒì²½µÄ¡£createBundleRendererÖ§³Öpromise
 return new Promise((resolve, reject) => {
 const { app, router } = createApp()

 router.push(context.url)

 router.onReady(() => {//onReady·½·¨»¹ÓÐgetMatchedComponents·½·¨»¹ÊÇÐèÒªÁË½âÒ»ÏÂ
  const matchedComponents = router.getMatchedComponents()
  if (!matchedComponents.length) {
  return reject({ code: 404 })
  }
  resolve(app)
 }, reject)
 })
}

×îºó¿´Ò»ÏÂrouter.js

//router.js
 import Vue from 'vue'
 import VueRouter from 'vue-router'
//Ò³ÃæÒªÏÈÉùÃ÷ºóÊ¹ÓÃ£¬²»ÒªÎÊÎªÊ²Ã´
import home from './pages/home'
import store from './pages/store'

Vue.use(VueRouter)
export default new VueRouter({
 mode: 'history',
 routes:[
  {path:'/',name:'home',component:home},
  {path:'/store',name:'store',component:store},
 ]
})

ÔÙ¿´Ò»ÏÂÁ½¸öÒ³ÃæµÄ´úÂë£»

 //store.vue 
 <template>
 <div>this is store</div>
 </template>
 <script>
   export default {}
 </script>

¸ÄµÄ²î²»¶àÁË£¬ÊÔÒ»¹þ£º

ÖØÐÂ´ò¸ö°üwebpack --config webpack.server.js

Æô¶¯node server

>entry-client.jsÊÇ¸ÉÉ¶µÄ

µ½Ä¿Ç°ÎªÖ¹»¹Ã»ÓÃµ½entry-client.js½Ð¿Í»§¶ËÅäÖÃ£¬²»×Å¼±Ê¹ÓÃ£¬ÏÈ×ö¸ö²âÊÔ£¬Ð´µãÂß¼ÊÔÊÔ£º
ÐÞ¸ÄÏÂstore.vue

//store.vue
<template>
<div @click='run'>{{msg}}</div>
</template>
<script>
 export default {
  data(){
   msg:'this is store'
  },
  created(){
   this.msg = 'this is created'
  },
  mounted(){
   this.msg = 'this is mounted'
  },
  methods: {
   run(){
    alert('this is methods')
   }
  }
 }
</script>

¿´Õâ¸öÑù×ÓÒ³Ãæ×îÖÕÕ¹Ê¾µÄ½á¹ûÓ¦¸ÃÊÇthis is mounted£¬È»¶ø½á¹ûÊÇÕâÑùµÄ£º

ºÜºÃ½âÊÍ£¬·þÎñ¶Ë¶ÔÓÚ¹³×Óº¯ÊýµÄÀí½âÒ²ÊÇºÜÕýÈ·µÄ£¬created»áÔÚÒ³Ãæ·µ»ØÖ®Ç°Ö´ÐÐ£¬¶ømountedÊÇÔÚvueÊµÀý³ÉÐÍÖ®ºóÖ´ÐÐ£¬¾ÍÊÇÒ³ÃæäÖÈ¾ºó£¬Õâ¸öÊÇÒªÔÚ¿Í»§¶Ë²Å»áÖ´ÐÐ£¬¿ÉÊÇÎªÊ²Ã´Ò³Ãæ³öÀ´ÁËÃ»ÓÐÖ´ÐÐmounted£¬¶øÇÒrunµÄµã»÷ÊÂ¼þÃ»ÓÐÉúÐ§£»

¿´¿´Ò³Ãæ£º

Ò»¸öjsÎÄ¼þ¶¼Ã»¼ÓÔØ£¬ÔõÃ´Ö´ÐÐÂß¼£¬¾ÍÊÇ¸ö¾²Ì¬Ò³Ãæ0.0£»

ÕâÊ±ºòentry-client.js¾Í³ö³¡ÁË

ÐÂÔöÁ½¸öÎÄ¼þ

//entry-client.js 
import { createApp } from './src/app.js';

const { app } = createApp();

app.$mount('#app');

»ù±¾ÅäÖÃ£»

//webpack.client.config.js

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

module.exports = merge(baseConfig, {
 entry: './entry-client.js',
 optimization:{
 runtimeChunk:true
 },
 plugins: [
 // ´Ë²å¼þÔÚÊä³öÄ¿Â¼ÖÐ
 // Éú³É `vue-ssr-client-manifest.json`¡£
 new VueSSRClientPlugin(),
 ]
})

Õâ¸öµØ·½ÖØµã³ýÁËVueSSRClientPluginÉú³Évue-ssr-client-manifest.jsonÍâ£¬optimizationÊÇwebpack4²úÎï£¬ÓÃÀ´·ÖÀëÉú³É¹²¹«chunk,ÅäÖÃ»¹Ëã¸´ÔÓ£¬¿ÉÒÔ¿´ÏÂÕâÀïwebpack4 optimization×Ü½á

ÐÞ¸ÄÏÂserver.js

//server.js

 const express = require('express');
 const chalk = require('chalk');

 const server = express();

 const serverBundle = require('./dist/vue-ssr-server-bundle.json')
 const clientManifest = require('./dist/vue-ssr-client-manifest.json')//ÐÂÔö
 const renderer = require('vue-server-renderer').createBundleRenderer(serverBundle,{
  runInNewContext: false, // ÍÆ¼ö
  template: require('fs').readFileSync('./index.html', 'utf-8'),
  clientManifest // //ÐÂÔö
  })
 server.get('*', (req, res) => {
  res.set('content-type', "text/html");
  const context = {
   url:req.url
   }

   renderer.renderToString(context, (err, html) => {
    if (err) {
    res.status(500).end('Internal Server Error')
    return
    } else {
    res.end(html)
    }
   })

  })

 server.listen(8080,function(){
  let ip = getIPAdress();
  console.log(`·þÎñÆ÷¿ªÔÚ£ºhttp://${chalk.green(ip)}:${chalk.yellow(8080)}`)
 })

 function getIPAdress(){//nodeÏÂµÄosÄ£¿é¿ÉÒÔÄÃµ½Æô¶¯¸ÃÎÄ¼þµÄ·þÎñ¶ËµÄ²¿·ÖÐÅÏ¢£¬Ï¸½Ú×Ô¼ºÈ¥nodeÉÏÃæ²é
  var interfaces = require('os').networkInterfaces();
  for (var devName in interfaces) {
   var iface = interfaces[devName];
   for (var i = 0; i < iface.length; i++) {
    var alias = iface[i];
    if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
     return alias.address;
    }
   }
  }
 }

´ò°üÏÂ£ºwebpack --config webpack.client.config.js

node server Ò»ÏÂ£¬¿´¿´Ò³Ãæ

jsÓÐÁË£¬¿ÉÊÇÎªÊ²Ã´»¹²»ÐÐ£¬²»ÄÜµã0.0£»

¿´¿´¡£°Â±¨´íÁË

¶ÁÈ¡²»µ½¾²Ì¬ÎÄ¼þ£»

ÐÞ¸Äserver.js¼Ó¸ö¾²Ì¬ÎÄ¼þÍÐ¹Ü£º

ÔÙ¿´¿´

ÊÂ¼þÒ²ÓÐÁË£¬Ò³ÃæÃ»±ä»¯£¬consoleÒ»ÏÂ£¬·¢ÏÖÖµÆäÊµÒÑ¾±äÁË£¬Ö»ÊÇÊ§È¥ÁËÏìÓ¦Ê½£»Õâ¾ÍÊÇÎªÊ²Ã´ÒªÓÃvuexµÄÔµ¹Ê£»

>¼ÓÈëvuex

¿ªÊ¼ÏëÔÚÒ³ÃæÖÐÓÃthis.$set·½·¨£¬È»¶øÐÐ²»Í¨£¬¶øÇÒ²»¿ÉÄÜ¸øÃ¿¸öÖµ¶¼ÖØÐÂÐ´Ò»¸öÕâ¸ö·½·¨£»

¼Ó¸ösotre.js

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

 export default new Vuex.Store({
 state: {
  msg: ''
 },
 actions: {
  setMsg ({ commit }, val) {
   commit('setMsg', val)
  }
 },
 mutations: {
  setMsg (state, val) {
  Vue.set(state, 'msg', val)//¹Ø¼ü
  }
 }
 })

ºÜ»ù´¡µÄÂß¼£¬¹Ø¼üÔÚVue.setÕâ¸ö·½·¨£¬ÖØÐÂÔö¼ÓÁËÏìÓ¦Ê½£»
ÐÞ¸ÄÏÂapp.js

//app.js
 import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'//¼Ó¸östore¾ÍÐÐÁË
export function createApp(){
 const app = new Vue({
  router,
  store,
  render:h => h(App)
 })
 return {app,router}
}

store.vue¸Ä³ÉÕâÑù

<template>
 <div @click='run'>{{msg}}</div>
</template>
<script>
 export default {
  data(){},
  created(){
   this.$store.dispatch('setMsg','this is created')
  },
  computed:{
   msg(){
    return this.$store.state.msg;
   }
  },
  mounted(){
   this.$store.dispatch('setMsg','this is mounted')
  },
  methods: {
   run(){
    alert('this is methods')
   }
  }
 }
</script>

ÖØÐÂ´ò¸ö°ü£¬ÏëÒ»ÏÂ£¬ÐÞ¸ÄÒ³ÃæµÄ»°Ö»ÐèÒªÖØÐÂ´ò°üclient,Èç¹ûÐÞ¸ÄÁËapp.jsÁ½¸ö¾ÍÒª¶¼ÖØÐÂ´ò°üÁË£»

node server Ò»ÏÂ

Õâ»Ø×ÜËãÍê³ÉÁË£»

>×Ü½á

·þÎñ¶ËäÖÈ¾¶«Î÷»¹ÊÇÍ¦¶àµÄ£¬Éæ¼°ÁìÓòÒ²·Ç³£¹ã£¬±ÈÈçvue£¬webpack,node£¬ËüÃÇµÄÉúÌ¬È¦¶¼´óµÄ¿ÉÅÂ£¬ÐèÒªÑ§Ï°¶«Î÷·Ç³£¶à£¬
¿ÓÓÖ¶à£¬ÓÖ´ó£¬ÓÖÉî£¬ºóÃæ»¹ÓÐºÜ¶àÎÊÌâÒª½â¾ö£º

Òì²½Êý¾Ý¼ÓÔØ£»//html·µ»ØÇ°ÏÈäÖÈ¾Ò»²¿·Ö½Ó¿ÚÄÃµ½µÄÊý¾Ý
ÔõÃ´×öseoÓÅ»¯£»//×ö·þÎñ¶ËäÖÈ¾µÄÖØÒªÔÒò£¬´¦ÀíÒì²½Êý¾Ý¼ÓÔØÎÊÌâÒ²ÊÇÎªÁËÕâ¸ö
»º´æÔõÃ´¼Ó£»
¿ª·¢»·¾³´î½¨£»//Äã²¢²»Ï£ÍûÃ¿¸ÄÒ»ÐÐ´úÂë¾ÍÖØÐÂÊÖ¶¯´ò¸ö°ü£¬ÖØÆôÏÂ·þÎñ°É0.0
»¹ÓÐÔõÃ´ÊµÏÖ²¿·ÖÒ³Ãæssr£»//Ò»¸öÏîÄ¿²»¿ÉÄÜËùÓÐÒ³Ãæ¶¼·þÎñ¶ËäÖÈ¾£¬Ì«ºÄÐÔÄÜ£¬·þÎñÆ÷Ñ¹Á¦´óÑ½£»

»¹ÓÐºÜ¶àÒÉ»ó£º

±ÈÈçÎªÊ²Ã´»áÊ§È¥ÏìÓ¦Ê½£¬webpackµ½µ×¸ÃÔõÃ´ÅäÖÃ¡£¡£

.....

转载请注明：谷谷点程序 » vue ssr服务端渲染(小白解惑)