浅谈vue的ssr服务端渲染

最新推荐文章于 2025-07-06 01:05:46 发布

原创

最新推荐文章于 2025-07-06 01:05:46 发布 · 1.7k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

为什么使用服务器端渲染 (SSR)

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。
更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content) 与转化率直接相关」的应用程序而言，服务器端渲染 (SSR) 至关重要。

使用服务器端渲染 (SSR) 时还需要有一些权衡之处：

开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行。
涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。
更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。

目录结构
在这里插入图片描述

1、定义打包命令和开发命令

开发命令是用于客户端开发
打包命令用于部署服务端开发

–watch 便于修改文件再自动打包

"client:build": "webpack --config scripts/webpack.client.js --watch",
"server:build": "webpack --config scripts/webpack.server.js --watch",

"run:all": "concurrently \"npm  run client:build\" \"npm run server:build\""

为了同时跑client:build 和 server:build

1.1 package.json

{
   
   
  "name": "11.vue-ssr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
   
    "client:dev": "webpack serve --config scripts/webpack.client.js",
    "client:build": "webpack --config scripts/webpack.client.js --watch",
    "server:build": "webpack --config scripts/webpack.server.js --watch",
    "run:all": "concurrently \"npm  run client:build\" \"npm run server:build\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   
   
    "concurrently": "^5.3.0",
    "koa": "^2.13.1",
    "koa-router": "^10.0.0",
    "koa-static": "^5.0.0",
    "vue": "^2.6.12",
    "vue-router": "^3.4.9",
    "vue-server-renderer": "^2.6.12",
    "vuex": "^3.6.0",
    "webpack-merge": "^5.7.3"
  },
  "devDependencies": {
   
   
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.13.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  }
}

1.2 webpack.base.js 基础配置

// webpack打包的入口文件 ， 需要导出配置

// webpack webpack-cli
// @babel/core babel的核心模块 
// babel-loader  webpack和babel的一个桥梁
// @babel/preset-env  把es6+ 转换成低级语法

// vue-loader vue-template-compiler  解析.vue文件 并且编译模板
// vue-style-loader css-loader 解析css样式并且插入到style标签中， vue-style-loader支持服务端渲染
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
   
   
    mode: 'development',
    output: {
   
   
        filename: '[name].bundle.js' ,// 默认就是main, 默认是dist目录
        path:path.resolve(__dirname,'../dist')
    },
    module: {
   
   
        rules: [{
   
   
            test: /\.vue$/,
            use: 'vue-loader'
        }, {
   
   
            test: /\.js$/,
            use: {
   
   
                loader: 'babel-loader', // @babel/core -> preset-env
                options: {
   
   
                    presets: ['@babel/preset-env'], // 插件的集合 
                }
            },
            exclude: /node_modules/ // 表示node_modules的下的文件不需要查找
        }, {
   
   
            test: /\.css$/,
            use: ['vue-style-loader', {
   
   
                loader: 'css-loader',
                options: {
   
   
                    esModule: false, // 注意为了配套使用vue-style-loader
                }
            }] // 从右向左执行
        }]
    },
    plugins: [
        new VueLoaderPlugin() // 固定的