正如Vue官方所说,SSR配置适合已经熟悉Vue, webpack和节点。js开发的开发者阅读。请先移步ssr.vuejs.org了解手工进行SSR配置的基本内容。
从头搭建一个服务端渲染的应用是相当复杂的。如果您有SSR需求,对Webpack及高雅不是很熟悉,请直接使用NUXT.js。
本文所述内容示例在Vue SSR Koa2脚手架:https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold
我们以撰写本文时的最新版:Vue 2, Webpack 4,高雅2为例。
<>强特别说明
此文描述的是API与网络同在一个项目的情况下进行的配置,且API, SSR服务器,静态均使用了同一个高雅示例,目的是阐述配置方法,所有的报错显示在一个终端,方便调试。
<强>初始化项目
git init
纱init
触摸.gitignore
在.gitignore文件,将常见的目录放于其中。
.DS_Store
node_modules
#编译后的文件以下两个目录/dist/网络/dist/api
#日志文件
npm-debug.log *
yarn-debug.log *
yarn-error.log *
#编辑目录和文件
.idea
.vscode
* .suo
* .ntvs *
* .njsproj
* . sln
* .sw *
之前
根据经验来预先添加肯定会用到的依赖项:
回声“纱添加cross-env #跨平台的环境变量设置工具
洋槐
koa-body #可选,推荐
koa-compress #压缩数据
可压缩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/#[[:空间:]]。*//g ' | tr ' \ n ' ' ' | sed ' s/[] [] *//g | bash
“纱添加- 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 #无视路径大小写插件
copy-webpack-plugin #用于拷贝文件的Webpack插件
mini-css-extract-plugin # CSS压缩插件
粉笔#控制台着色
@babel/核心#不解释
babel-loader
@babel/plugin-syntax-dynamic-import #支持动态导入
@babel/plugin-syntax-jsx #兼容JSX写法
babel-plugin-syntax-jsx #不重复,必须的
babel-plugin-transform-vue-jsx
babel-helper-vue-jsx-merge-props
@babel/polyfill
@babel/preset-env
file-loader
json-loader
url-loader
css-loader
vue-loader
vue-style-loader
vue-html-loader”| sed ' s/#[[:空间:]]。*//g ' | tr ' \ n ' ' ' | sed ' s/[] [] *//g | bash
之前
现在的npm模块命名越来越语义化,基本上都是见名知意。关于Eslint以及手写笔,少等CSS预处理模块我没有添加,其不是本文研究的重点,况且既然您在阅读本文,这些配置相信早已不在话下了。
效仿electorn分离主要及渲染器,在src中创建api及web目录。效仿vue-cli,在根目录下创建公共目录用于存放根目录下的静态资源文件。
| - - -公共#静态资源
| - - - src
| - - - api #后端代码
| - - - web #前端代码
譬如NUXT。js,前端服务器代理API进行后端渲染,我们的配置可以选择进行一层代理,也可以配置减少这层代理,直接返回渲染结果。通常来说,SSR的服务器端渲染只渲染首屏,因此API服务器最好和前端服务器在同一个内网。
配置包。json的脚本:
"脚本":{
“服务”:“cross-env NODE_ENV=发展节点配置/server.js”,
“开始”:“cross-env NODE_ENV=生产节点配置/server.js”
}
之前
<李>纱服务:启动开发调试李
<李>纱线开始:运行编译后的程序李
<李>配置/应用程序。js导出一些常见配置:李
模块。出口={
应用:{
端口:3000//监听的端口
devHost: ' localhost ',//开发环境下打开的地址,监听了0.0.0.0,但是不是所有设备都支持访问这个地址,用127.0.0.1或本地主机代替
开放:真//是否打开浏览器
}
}
