Uniapp怎么做ssr-猿码集

1. 什么是Uniapp？

Uniapp是一款前端跨平台开发框架，它可以将同一份代码通过编译生成多个不同平台的应用，如iOS、Android、H5等，同时可以与原生代码混合开发。Uniapp具有良好的开发体验和高效的运行性能。

2. 什么是SSR？

SSR全称为Server Side Render，即服务器端渲染，是指在服务器端将动态页面直接输出HTML字符串，并将其发送给浏览器，而不是将一些JavaScript脚本发送给浏览器然后在客户端渲染。SSR可以提高首屏加载速度，有利于SEO。

3. Uniapp的SSR实现

3.1 SSR的实现方式

在Uniapp中，实现SSR有两种方式，一种是通过插件的形式实现，另一种是通过自定义构建命令实现。

3.2 使用插件实现SSR

Uniapp提供了插件 uni-app-ssr，使用它可以快速地实现SSR。首先需要在命令行中安装该插件：

npm i uni-app-ssr -D

然后在vue.config.js文件中对插件进行配置：


const ssrPlugin = require('uni-app-ssr')
module.exports = {
  configureWebpack: {
    plugins: [
      new ssrPlugin()
    ]
  }
}

这样配置后，SSR就可以通过npm run ssr命令进行编译。在开发环境下，可以用npm run ssr-dev命令进行开发和热更新。

3.3 自定义构建命令实现SSR

除了使用插件，还可以通过自定义构建命令实现SSR。首先需要在项目根目录下创建一个node文件夹，在node文件夹中创建一个build.js文件。

接下来，在package.json文件中添加自定义构建命令：


{
  "scripts": {
    "ssr": "node node/build.js"
  }
}

然后在build.js中进行SSR的构建。


const path = require('path')
const fs = require('fs')
const chalk = require('chalk')
const bundleSSR = require('@dcloudio/vue-cli-plugin-uni/bundle/bundle-ssr')
const resolve = dir => path.join(__dirname, '..', dir)
const outputDir = resolve('dist-ssr')
function main() {
  console.log(chalk.green('Starting SSR build...\n'))
  bundleSSR({
    outputDir,
    assetsDir: 'static',
    template: fs.readFileSync(resolve('public/index.ssr.html')),
    clientManifest: require(resolve('dist/js/vue-ssr-client-manifest.json')),
  }).then(() => {
    console.log(chalk.green('\nSSR build complete!'))
  }).catch((err) => {
    console.error(chalk.red(err))
    process.exit(1)
  })
}
main()

这样，执行npm run ssr命令就可以进行SSR的构建。

4. SSR的配置

4.1 webpack配置

在进行SSR构建时，需要对webpack进行一些特殊的配置，比如在client和server的配置中区分开发环境和生产环境。

其中client的webpack配置可以通过vue.config.js文件进行配置，server的webpack配置可以通过server.js文件进行配置。

4.2 SSR入口文件

SSR的入口文件是src/entry-server.js，它负责生成服务器端渲染的内容。在这个文件中，我们主要需要进行以下操作：

创建Vue实例

为Vue实例传递路由信息

为Vue实例传递store数据

返回Vue实例

4.3 server.js

server.js是服务器端渲染的入口文件，它通过express框架来启动一个静态资源服务，然后将SSR结果返回给浏览器。

在server.js中，我们需要做以下几件事情：

设置服务器端口号

加载webpack配置文件并创建Compiler实例

使用webpack-dev-middleware和webpack-hot-middleware进行热更新，开发环境下需要使用

将请求转发给webpack-dev-server或webpack-dev-middleware

创建vue-server-renderer实例，对页面进行渲染并返回给浏览器

5. SSR的优缺点

5.1 优点

提高页面渲染速度，减少首屏加载时间

有利于SEO，提高搜索引擎爬虫的抓取效果

可以降低服务器的压力，减少带宽费用的消耗

5.2 缺点

SSR的学习成本比较高，需要了解Node.js、Express、webpack等技术

SSR会增加前端开发的难度，需要考虑浏览器和服务器两个环境的兼容性

SSR对于交互复杂的页面渲染效果不够好，因为在服务器端渲染没有交互逻辑，只有静态页面

6. 总结

在Uniapp中，可以通过插件或自定义构建命令的方式实现SSR，对于一些需要提高页面渲染速度和SEO效果的应用，SSR是一个不错的选择。不过SSR也有其缺点，需要根据具体的项目情况进行选择。

Uniapp怎么做ssr