Sugerencia: seguimiento más perfecto
Directorio de artículos
concepto de RSS
Nombre completo: procesamiento del lado del servidor
tecnología de procesamiento web tradicional asp .net php jsp
Darse cuenta del proceso específico de vue ssr
Crear proyecto vue cli 3
vue crear ssr
instalar dependencias
renderer vue-server-renderer
nodejs server express
npm i vue-servidor-renderizar express -D
Escribir un script de inicio del servidor
Cree un servidor express, integre vue ssr, ./server/index.js
enrutamiento
Instalar vue-router
npm y vue-router -s
configuración
Crear ./src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../components/Index'
import Detail from "@/components/Detail";
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Index',
component: Index
},
{
path: '/detail',
name: 'Detail',
component: Detail,
}
]
/*
* 这里为什么不导出一个router实例哪?
* 每次用户请求都需要创建router实例
* */
export default function createRoute() {
return new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
}
Crear ./src/components/Index.vue, ./src/components/Detail.vue
<template>
<div>
Index Page
</div>
</template>
<script>
export default {
name: "DetailPage"
}
</script>
<style scoped>
</style>
<template>
<div>
Detail Page
</div>
</template>
<script>
export default {
name: "DetailPage"
}
</script>
<style scoped>
</style>
Actualizar App.vue
<template>
<div id="app">
<nav>
<router-link to="/">首页</router-link>
<router-link to="/detail">详情页</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
name: "app",
components: {}
}
</script>
<style lang="less">
</style>
Construir
proceso de construcción
estructura del código
src
├── components
│ ├── Foo.vue
│ ├── Bar.vue
│ └── Baz.vue
├── App.vue
├── app.js # Entrada general
├── entry-client.js # Entrada del cliente, solo se ejecuta en el browser
└── entry-server.js # Entrada del servidor, solo se ejecuta en el servidor
Entrada
aplicación.js
// 创建vue实例
import Vue from 'vue'
import App from './App.vue'
import createRouter from './router'
export default function createApp() {
const router = createRouter();
const app = new Vue({
router,
render: h => h(App)
})
return {
app, router}
}
entrada del servidor
entrada-servidor.js
// 渲染首屏
import createApp from "./app";
// context哪来的?
export default context => {
return new Promise((resolve, reject) => {
const {
app, router} = createApp()
// 加入首屏
router.push(context.url)
router.onReady(() => {
resolve(app)
}, reject)
})
}
entrada del cliente
entrada-cliente.js
// 挂载、激活app
import createApp from './app'
const {
app, router} = createApp()
router.onReady(() => {
app.$mount('#app')
})
embalaje de paquete web
instalar dependencias
npm install webpack-nodo-externos lodash.merge -D
Configuración específica, vue.config.js
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
const nodeExternals = require("webpack-node-externals");
const merge = require("lodash.merge");
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";
module.exports = {
css: {
extract: false
},
outputDir: './dist/' + target,
configureWebpack: () => ({
// 将 entry 指向应用程序的 server / client 文件
entry: `./src/entry-${
target}.js`,
// 对 bundle renderer 提供 source map 支持
devtool: 'source-map',
// 这允许 webpack 以 Node 适用方式处理动态导入(dynamic import),
// 并且还会在编译 Vue 组件时告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
target: TARGET_NODE ? "node" : "web",
node: TARGET_NODE ? undefined : false,
output: {
// 此处告知 server bundle 使用 Node 风格导出模块
libraryTarget: TARGET_NODE ? "commonjs2" : undefined
}
,
// 外置化应用程序依赖模块。可以使服务器构建速度更快,并生成较小的 bundle 文件。
externals: TARGET_NODE
? nodeExternals({
// 不要外置化 webpack 需要处理的依赖模块。
// 可以在这里添加更多的文件类型。例如,未处理 *.vue 原始文件,
// 你还应该将修改 `global`(例如 polyfill)的依赖模块列入白名单
whitelist: [/\.css$/]
})
: undefined,
optimization: {
splitChunks: undefined
}
,
// 这是将服务器的整个输出构建为单个 JSON 文件的插件。
// 服务端默认文件名为 `vue-ssr-server-bundle.json`
plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
}
),
chainWebpack: config => {
config.module
.rule("vue")
.use("vue-loader")
.tap(options => {
merge(options, {
optimizeSSR: false
});
});
}
};
ubicación del guión
instalar dependencias
npm i cross-env -D
Defina el script de creación, paquete.json
"scripts": {
"build:client": "vue-cli-service build",
"build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server",
"build": "npm run build:server && npm run build:client"
}
archivo anfitrión
Finalmente, debe definir el archivo host y crear ./src/index.temp.html
archivo de inicio del servidor
Modifique el archivo de inicio del servidor, todas las rutas son tomadas por vue, use el renderizador de paquetes para generar contenido, ./server/index.js