详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
186 浏览量
2020-12-08
19:35:32
上传
评论
收藏 101KB PDF 举报
详解详解Vue SSR（（ Vue2 + Koa2 + Webpack4）配置指南）配置指南
正如Vue官方所说，SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读。请先移步ssr.vuejs.org 了解手工进
行SSR配置的基本内容。
从头搭建一个服务端渲染的应用是相当复杂的。如果您有SSR需求，对Webpack及Koa不是很熟悉，请直接使用NUXT.js。
本文所述内容示例在 Vue SSR Koa2 脚手架 ： https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold
我们以撰写本文时的最新版：Vue 2，Webpack 4，Koa 2为例。
特别说明特别说明
此文描述的是API与WEB同在一个项目的情况下进行的配置，且API、SSR Server、Static均使用了同一个Koa示例，目的是
阐述配置方法，所有的报错显示在一个终端，方便调试。
初始化项目初始化项目
git init
yarn init
touch .gitignore
在 .gitignore 文件，将常见的目录放于其中。
.DS_Store
node_modules
# 编译后的文件以下两个目录
/dist/web
/dist/api
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
根据经验来预先添加肯定会用到的依赖项：
echo "yarn add cross-env # 跨平台的环境变量设置工具
koa
koa-body # 可选，推荐
koa-compress # 压缩数据
compressible # https://github.com/jshttp/compressible
axios # 此项目作为API请求工具
es6-promise
vue
vue-router # vue 路由 注意，SSR必选
vuex # 可选，但推荐使用，本文基于此做Vuex在SSR的优化
vue-template-compiler
vue-server-renderer # 关键
lru-cache # 配合上面一个插件缓存数据
vuex-router-sync" | sed 's/#[[:space:]].*//g' | tr '' ' ' | sed 's/[ ][ ]*/ /g' | bash
echo "yarn add -D webpack
webpack-cli
webpack-dev-middleware # 关键
webpack-hot-middleware # 关键
webpack-merge # 合并多个Webpack配置文件的配置
webpack-node-externals # 不打包node_modules里面的模块
friendly-errors-webpack-plugin # 显示友好的错误提示插件
case-sensitive-paths-webpack-plugin # 无视路径大小写插件
评论0