从零开始搭建Vue服务端渲染项目（二）：构建

最新推荐文章于 2022-08-10 23:41:28 发布
最新推荐文章于 2022-08-10 23:41:28 发布
阅读量552 收藏 1
点赞数
文章标签： vue node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hd101367816/article/details/115433089
版权

构建流程

同构应用的构建流程是比较复杂的，由于同构应用的原理，代码既会运行在服务端，也会运行在客户端，所以我们在构建时需要同时进行服务端构建和客户端构建。
服务端渲染使用的是构建完毕的server bundle来进行。客户端渲染使用的是构建完毕的client bundle来进行。
但是在服务端渲染页面时，需要提前在页面注入客户端所需的js脚本，所以需要一个客户端代码的映射文件，将client bundle的引用填入html中，故最终服务端渲染时需要三样东西server bundle、html模板文件、客户端代码映射文件。正好与vue-server-renderer的createBundleRenderer的参数对应：serverBundle、template、clientManifest。
所以整个流程看起来像是这样：

		 |-- =>server-entry --|                            |-- => server-bundle
		 |                    |                            |
webpack	=>                      => app.js  => src => ...  => 
         |                    |                            |    |--=>client-bundle
         |-- =>client-entry --|                            |----- 
                                                                |--=>client-manifest

webpack至少需要两套配置，一套给服务端，入口文件是server-entry.js；一套给客户端，入口文件是client-entry.js。两个入口文件都会进入app.js进行项目构建。

app.js

安装

npm i vue vue-router vuex -S

创建文件

在项目根目录下创建app.js、src/App.vue、src/router/index.js、src/store/index.js、src/views/index.vue、src/views/about.vue

bash命令
mkdir src src/router src/store src/views
touch app.js src/App.vue src/router/index.js src/store/index.js src/views/index.vue src/views/about.vue

编写

app.js

这里放置的是整个项目的入口，需要进行Vue实例的创建、Vue-router的创建等。

  • 注意！！由于服务端运行时是多线程的，所以为了避免线程间的交叉污染，需要为每一个线程都创建一个全新的Vue实例，故使用工厂函数的方式创建Vue实例！！
  • 再注意！！ vue-router和vuex的实例也是一样需要避免交叉污染，需要使用工厂函数！！
  • 最后注意！！这里需要使用es module而不是nodejs的commonJS2！！
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './src/App.vue';
//router需要避免线程交叉污染,使用工厂函数
import createRouter from './src/router';
//store也需要避免线程交叉污染,使用工厂函数
import createStore from './src/store';

export default function createApp(context = {}) {
  Vue.use(VueRouter);

  const router = createRouter();
  const store = createStore();

  const app = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount('#app');

  //导出 为 server-entey 和 client-entry 使用
  return { app, router, store };
}

router/index.js

import VueRouter from 'vue-router';

export default function createRouter(context) {
  const routes = [
    {
      path: '/',
      component: () => import('../views/index.vue'),
    },
    {
      path: '/about',
      component: () => import('../views/about.vue'),
    },
  ];
  const router = new VueRouter({
    routes,
    mode: 'history',
  });
  return router;
}

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default function createStore() {
  return new Vuex.Store({
    //!!!非常重要,state必须为一个函数!!!!
    state: () => ({
      mockData: 'mockData',
    }),
  });
}

App.vue

<template>
  <div id="app">
    <router-link to="/">home</router-link>
    <router-link to="/about">about</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style></style>

views/index.vue

<template>
  <div>this is home</div>
</template>

<script>
export default {};
</script>

<style></style>

views/about.vue

<template>
  <div>this is about</div>
</template>

<script>
export default {};
</script>

<style></style>

server-entry

新建文件server/ssr/server-entry.js。

touch server/ssr/server-entry.js

服务端构建入口，由于需要防止线程交叉污染，也是导出一个工厂函数

  • 由于路由可能存在异步路由（路由懒加载），故需要返回一个promise对象等待异步路由加载完毕。
  • 工厂函数需要接受一个context上下文对象，还记得renderToString的第一个参数吗？就是它
  • 此处也要使用es module
import createApp from '../../app';

export default async (context) => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp(context);
    app.$store = store;
    //vue-router需要从上下文中取出当前服务端被请求路径
    router.push(context.url);

    router.onReady(() => {
      resolve(app);
    }, reject);
  });
};

这里有一步操作是从上下文对象中取出url，所以我们需要在renderToString调用时传入url，于是更新server/ssr/index.js的代码：

const fs = require('fs');
const log4js = require('log4js');
const logger = log4js.getLogger();
const resolve = (path) => require('path').resolve(__dirname, path);
const { createBundleRenderer } = require('vue-server-renderer');
const template = fs.readFileSync(resolve('../../index.template.html'));
//创建一个服务端渲染器
const renderer = createBundleRenderer(serverBundle, {
  template,
  clientManifest,
});

module.exports = (server, router) => {
  router.get('/(.*)', async (ctx, next) => {
    try {
      //渲染HTML
      const html = await renderer.renderToString({ url: ctx.url });
      ctx.body = html;
    } catch (e) {
      //渲染失败
      logger.error(e);
      await next();
    }
  });
};

client-entry

客户端入口就比较简单啦，不需要考虑线程交叉污染，新建文件/client/client-entry.js，直接上代码吧。

mkdir client
touch client/client-entry.js

/**
 * 同构应用的客户端入口
 */
import createApp from '../app';

const { app, router, store } = createApp({});
app.$store = store;

router.onReady(() => {
  app.$mount('#app');
});

构建

现在我们终于要开始构建啦~

说在前面

构建过程中各种插件、依赖的版本会有冲突，如果发生一些莫名其妙的错误你就要考虑到是不是版本的问题啦。本人在附录放了一张依赖版本表，需要的自取~

安装

npm i webpack webpack-cli webpack-merge -D

版本号：

    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.9",
    "webpack-merge": "^4.2.2",

创建文件

根目录创建build文件夹，接下来创建build/building-config.js、build/webpack.base.js、build/webpack.loc.js、build/webpack.pro.js、build/webpack.client.js、build/webpack.server.js。
根目录创建env文件夹，用于放置各种环境变量，创建env/local.js。
新建babel.config.js，babel配置文件

bash命令：
mkdir build
touch build/building-config.js build/webpack.base.js build/webpack.loc.js build/webpack.pro.js build/webpack.client.js build/webpack.server.js
mkdir env
touch env/local.env.js env/prodution.env.js
touch babel.config.js

env/local.env.js

这里放置本地开发环境的环境变量：

'use strict';

module.exports = {
  NODE_ENV: '"local"',
  STATIC_PREFIX: '"/dist/"',
};

env/prodution.env.js

这里放置生产环境的环境变量：

'use strict';

module.exports = {
  NODE_ENV: '"production"',
  STATIC_PREFIX: '"/dist/"'
};

babel.config.js

根据自己需要配吧，我这里配了个vantUI的SSR适配：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
        }
      }
    ]
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    [
      'import',
      {
        libraryName: 'vant',
        style: true
      },
      'vant'
    ]
  ]
};

building-config.js

主要是一些构建的配置，比如说babel的配置文件存放位置，以及打包后生成的路径

const resolve = (path) => require('path').resolve(__dirname, path);

module.exports = {
  babelConfig: require(resolve('../babel.config.js')),
  assetsRoot: resolve('../server/public/dist'),
};

可以看到我们最后打包到的路径是server/public/dist，故需要让服务器打开server/public的访问，这里需要使用koa-static插件：

npm i koa-static -S

更新server/server.js代码：

const Koa = require('koa');
const serve = require('koa-static');
const router = require('koa-router')();
const config = require(`./config/${process.env.NODE_ENV}`);
const ssrMixin = require('./ssr');
const resolve = (path) => require('path').resolve(__dirname, path);
const app = new Koa();

//静态资源托管
app.use(serve(resolve('./public')));

//SSR逻辑
ssrMixin(app, router);

//koa-router中间件
app.use(router.routes()).use(router.allowedMethods());

app.listen(config.port);

webpack.base.js

webpack的基础配置文件用于给其他配置文件merge使用，这里配置比较简单。
需要注意的是filename和chunkFilename不要加其他任何插值，只能用[name]，至于[hash]之类的之后在生产环境的时候再另外配置。

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const buildingConf = require('./building-config');
const resolve = (path) => require('path').resolve(__dirname, path);

module.exports = {
  output: {
    //打包后生成的文件夹
    path: buildingConf.assetsRoot,
    //静态目录,可以直接从这里取文件
    publicPath: '/dist',
    //打包后生成的文件名
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json', '.vue'],
    alias: {
      '@': resolve('../src'),
      '~@': resolve('../src'),
    },
  },
  plugins: [new VueLoaderPlugin()],
};

webpack.loc.js

这里是本地开发环境的webpack配置文件：

const merge = require('webpack-merge');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const baseConfig = require('./webpack.base');
const webpack = require('webpack');
const env = require('../env/local.env');
const resolve = (path) => require('path').resolve(__dirname, path);

let devConfig = merge(baseConfig, {
  //打包入口
  entry: {
    app: [resolve('../client/client-entry.js')],
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: resolve('../src'),
              },
            },
          },
          'less-loader',
        ],
      },
      {
        //页面中import css文件打包需要用到
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: resolve('../src'),
              },
            },
          },
        ],
      },
      //添加ts文件解析
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10240,
          name: 'img/[name].[hash:7].[ext]',
        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/[name].[hash:7].[ext]',
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]',
        },
      },
    ],
  },
  plugins: [
    //线程变量的配置
    new webpack.DefinePlugin({
      process: {
        env,
      },
    }),
    new FriendlyErrorsPlugin(),
  ],
  mode: 'development',
  stats: 'errors-only',
  devtool: 'eval-source-map',
});

module.exports = devConfig;

emmm，其实就是webpack没什么好说的，不会webpack的出门右转B站，有很多webpack的教学视频。

webpack.pro.js

生产环境的打包，涉及到一些css抽离、代码分割、压缩、gzip、css兼容性、babel。webpack不过关的同学请出门右转B站，不想了解详情的同学直接复制就好，然后安装相应的依赖。（依赖版本放在本篇附录）
具体一些环节我都写道注释里面啦，你们自己看看叭。
哎哟妈呀这个生产环境的配置可是配死我了，可是花了我整整两天！

const merge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin;
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const baseConfig = require('./webpack.base');
const buildingConf = require('./building-config');
const resolve = (path) => require('path').resolve(__dirname, path);

let prodConfig = merge(baseConfig, {
  //打包入口
  entry: {
    app: ['@babel/polyfill', resolve('../client/client-entry.js')],
  },
  output: {
    filename: 'js/[name].[contenthash].js',
    chunkFilename: 'js/[name].[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          {
            loader: ExtractCssChunksPlugin.loader,
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: resolve('../src'),
              },
            },
          },
          'less-loader',
        ],
      },
      {
        //页面中import css文件打包需要用到
        test: /\.css$/,
        use: [
          {
            loader: ExtractCssChunksPlugin.loader,
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: resolve('../src'),
              },
            },
          },
        ],
      },
      //添加ts文件解析
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10240,
          name: 'img/[name].[hash:7].[ext]',
          esModule: false,
        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/[name].[hash:7].[ext]',
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]',
        },
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: buildingConf.babelConfig,
          },
        ],
        /* 排除模块安装目录的文件 */
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    //css抽离
    new ExtractCssChunksPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].chunk.css',
    }),
    //压缩css
    new OptimizeCSSPlugin(),
    //需要分析打包结果的话请开启这个注释！
    //new BundleAnalyzerPlugin(),
    new CompressionWebpackPlugin(),
  ],
  optimization: {
    splitChunks: {
      name: 'vendors',
      /**
       * chunks可以填写三个值:initial,async,all
       * initial: 对于匹配文件，非动态模块打包进该vendor,动态模块优化打包
       * async: 对于匹配文件，动态模块打包进该vendor,非动态模块不进行优化打包
       * all: 匹配文件无论是否动态模块，都打包进该vendor
       */
      chunks: 'initial',
      cacheGroups: {
        //将引用到2次以上的模块打包到common bundle
        common: {
          chunks: 'initial',
          name: 'common',
          minSize: 0,
          minChunks: 2, // 重复2次才能打包到此模块
        },
        async: {
          test: /node_modules/,
          name: 'vendors-async',
          chunks: 'async',
        },
      },
    },
    minimizer: [
      //压缩js
      new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
  devtool: 'none',
  mode: 'production',
});

module.exports = prodConfig;

webpack.client.js

客户端构建配置文件。

  • 需要根据不同的环境去merge不同的webpack配置。
  • 需要在环境变量中注入一个isBrowser的变量，值为true，表明现在是浏览器环境。
  • plugins列表中需要加入一个vue-server-renderer/client-plugin插件，用于生成client-manifest文件。
const merge = require('webpack-merge');
const webpack = require('webpack');
const WebpackBar = require('webpackbar');
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
const env = require(`../env/${process.env.NODE_ENV}.env`);
let config; //动态导入不同环境的配置
if (process.env.NODE_ENV === 'local') {
  config = require(`./webpack.loc`);
} else {
  config = require(`./webpack.pro`);
}

module.exports = merge(config, {
  output: {
    publicPath: env.STATIC_PREFIX.replace(/"/g, ''),
  },
  plugins: [
    new webpack.DefinePlugin({
      process: {
        env,
        isBrowser: true,
      },
    }),
    // 此插件在输出目录中生成 `vue-ssr-client-manifest.json`。
    new VueSSRClientPlugin(),
    new WebpackBar({
      name: 'client',
      color: '#00B101',
    }),
  ],
});

webpack.server.js

服务器构建配置文件，要稍微复杂一些些哦~

  • 也是需要根据不同的环境去merge不同的webpack配置。
  • target为node，表明当前为node环境并且会告知vue-loader需要面向服务端输送代码。
  • output.libraryTarget为commonjs2，表明以commonjs2模块输出代码。
  • externals中使用webpack-node-externals插件，屏蔽nodejs原生模块，如fs等。
  • plugins中要添加vue-server-renderer/server-plugin插件，用于生成server-bundle。
  • devtool为eval-source-map，用于日志记录友好的报错信息。
const merge = require('webpack-merge');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
const WebpackBar = require('webpackbar');
const resolve = (path) => require('path').resolve(__dirname, path);
const env = require(`../env/${process.env.NODE_ENV}.env`);
let config; //动态导入不同环境的配置
if (process.env.NODE_ENV === 'local') {
  config = require(`./webpack.loc`);
} else {
  config = require(`./webpack.pro`);
}

module.exports = merge(config, {
  //打包入口
  entry: [resolve('../server/ssr/server-entry.js')],
  // 这允许 webpack 以 Node 适用方式处理模块加载
  // 并且还会在编译 Vue 组件时，
  // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
  target: 'node',
  output: {
    publicPath: env.STATIC_PREFIX.replace(/"/g, ''),
    filename: 'server-bundle.js',
    // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
    libraryTarget: 'commonjs2',
  },
  // 不打包 node_modules 第三方包，而是保留 require 方式直接加载
  externals: [
    nodeExternals({
      // 白名单中的资源依然正常打包
      allowlist: [/\.css$/,/vant\/lib/],
    }),
  ],
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1,
    }),
    new webpack.DefinePlugin({
      process: {
        env,
        isBrowser: false,
      },
    }),
    // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
    // 默认文件名为 `vue-ssr-server-bundle.json`
    new VueSSRServerPlugin(),
    new WebpackBar({
      name: 'server',
      color: '#F3A702',
    }),
  ],
  devtool: 'eval-source-map',
});

编写构建脚本

"scripts": {
    "local": "cross-env NODE_ENV=local node server/server",
    "prod": "cross-env NODE_ENV=production node server/server",
    "build-prod": "rm -rf server/public/dist && cross-env NODE_ENV=production webpack --config build/webpack.client.js && cross-env NODE_ENV=production webpack --config build/webpack.server.js"
}

local启动本地开发环境。
build-prod打包生产环境
prod启动生产环境部署项目，必须在build-prod之后运行

注意此时先不要启动npm run local，因为dev-server还没有搭建完毕（下一篇会教大家搭建一个本地开发环境），我们先试试生产环境构建，这时候你在终端输入npm run build-prod之后可以看到打包后的文件啦，已经在server/public/dist中可以看到clientManifest和serverBundle啦~
clientManifest => vue-ssr-client-manifest.json、serverBundle => vue-ssr-server-bundle.json

现在我们启动npm run prod是没用滴，因为我们还没有讲renderer配置完呢~，没事，我们现在就来配置。

部署

打开server/ssr/index.js。
由于我们之后对于本地开发环境的处理和部署环境不一样（下一篇会教大家搭建一个本地开发环境），开发环境需要使用dev-server进行模块热替换啥的，所以我们这里也需要分环境获取不同滴renderer。

const fs = require('fs');
const log4js = require('log4js');
const logger = log4js.getLogger();
const resolve = (path) => require('path').resolve(__dirname, path);
const { createBundleRenderer } = require('vue-server-renderer');
const template = fs.readFileSync(resolve('../../index.template.html'), 'utf-8');

//创建一个服务端渲染器
let renderer;
//本地开发环境
if (process.env.NODE_ENV === 'local') {
  //这里先空着叭
} else {
  //部署环境
  const serverBundle = require('../public/dist/vue-ssr-server-bundle.json');
  const clientManifest = require('../public/dist/vue-ssr-client-manifest.json');
  renderer = createBundleRenderer(serverBundle, {
    template,
    clientManifest,
  });
}

module.exports = (server, router) => {
  router.get('/(.*)', async (ctx, next) => {
    try {
      //渲染HTML
      const html = await renderer.renderToString({ url: ctx.url });
      ctx.body = html;
    } catch (e) {
      //渲染失败
      logger.error(e);
      await next();
    }
  });
};

接下来你就可以使用npm run prod来运行项目啦~

Let’s Rock&Roll!!!

但是这只是部署环境的构建流程，我们在本地开发的时候总不可能一旦有改动就要整个项目重新打包构建吧？这样效率太低了，于是我下一篇就会教大家怎么搭建一个本地的开发环境，每次改动不再需要整个项目打包啦。未完待续哦…

附录

依赖版本表：

"devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.13.10",
    "autoprefixer": "^9.7.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-import": "^1.13.3",
    "chokidar": "^3.5.1",
    "compression-webpack-plugin": "^5.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^5.1.3",
    "extract-css-chunks-webpack-plugin": "^4.9.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.2.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "koa-webpack-dev-middleware": "^2.0.2",
    "koa-webpack-hot-middleware": "^1.0.3",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.0.18",
    "typescript": "^4.2.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.43.0",
    "webpack-bundle-analyzer": "^4.4.0",
    "webpack-cli": "^3.3.9",
    "webpack-merge": "^4.2.2",
    "webpack-node-externals": "^2.5.2",
    "webpackbar": "^5.0.0-3"
  },
  "dependencies": {
    "cross-env": "^7.0.3",
    "koa": "^2.13.1",
    "koa-router": "^10.0.0",
    "koa-static": "^5.0.0",
    "log4js": "^6.3.0",
    "vue": "^2.6.12",
    "vue-router": "^3.5.1",
    "vue-server-renderer": "^2.6.12",
    "vuex": "^3.6.2"
  }
爱学习的前端小黄
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue服务端渲染 MySQL_vue服务端渲染
weixin_34556808的博客
02-04 146
一、基本原理1、服务端渲染实现原理机制：在服务端拿数据进行解析渲染，直接生成html片段返回给前端。然后前端可以通过解析后端返回的html片段到前端页面，大致有以下两种形式：a、服务器通过模板引擎直接渲染整个页面，例如java后端的vm模板引擎，php后端的smarty模板引擎。b、服务端渲染生成html，前端通过ajax获取然后使用js动态添加。2、服务端渲染的优劣服务端渲染的好处：a、seo问...
修改vue项目到服务器端渲染,vue-server-renderer实现vue项目改造服务端渲染
weixin_31556767的博客
08-04 1244
这是一篇教程，从创建项目到改造项目vue-cli创建一个项目在放你做demo的地方，创建一个项目vue create vue-ssr// 如果你安装了vue-cli4，选择vue2的版本，以下的改进过程是按vue2来做的经过漫长的等待，下载好文件开始我们的改造之路文件目录进入vue-ssr文件夹，使用命令vue ui把vue-router装上先安装几个依赖插件// 安不上用cnpm，yarn，np...
Vue项目使用SSR服务器渲染
Niall_Tonshall的博客
03-04 5409
注意：这是笔者用于记录自己学习SSR的一篇文章，用于梳理将一个项目进行服务器渲染的过程，本文仅是读者根据demo得出的理解，如果您想通过本文来学习如何部署ssr，笔者建议您查阅其他更权威的资料进行学习；当然，如果您发现了本文中有任何描述不恰当的地方，还恳请您指出更正。 ...
彻底理解服务端渲染 - SSR原理
沛哥儿的专栏
03-18 2253
读完本文后，你将了解到： 什么是服务端渲染，与客户端渲染的区别是什么？ 为什么需要服务端渲染，服务端渲染的利弊是什么？ 如何对VUE项目进行同构？
vue ssr和vue-server-renderer原理
越思考越清晰
02-25 6335
原理 程序想要成为可交互的spa就必须要用client bundle // 安装 npm i vue-server-renderer express -D 步骤： 1）用renderToString()把vue实例挂载的内容变成html，返回给客户端 1、把vue实例变成html // nodejs服务器 const express = require("express"); const Vu...
从零搭建Vue服务端渲染
wsq_bsdn的博客
04-21 464
hello
从零开始构建VUE 客户端和服务端SSR项目
小青蛙的博客
12-15 4261
一、服务端渲染   1.基本概念 Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 2.为什么要使用服务端渲染 优点： （1）更好的 SEO，由于搜索引擎爬虫抓取工具可以直...
java 服务端渲染_基于vue-ssr服务端渲染入门详解
weixin_35544325的博客
02-21 2731
第一部分 基本介绍1、前言服务端渲染实现原理机制：在服务端拿数据进行解析渲染，直接生成html片段返回给前端。然后前端可以通过解析后端返回的html片段到前端页面，大致有以下两种形式：1、服务器通过模版引擎直接渲染整个页面，例如java后端的vm模版引擎，php后端的smarty模版引擎。2、服务渲染生成html代码块, 前端通过AJAX获取然后使用js动态添加。2、服务端渲染的优劣服务端渲染能够...
从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（一）
微赚淘客系统开发者博客
10-29 845
摘要：随着前端技术的飞速发展，越来越多的技术领域开始被前端工程师踏足。从NodeJs问世至今，各种前端工具脚手架、服务端框架层出不穷，“全栈工程师”对于前端开发者来说，再也不只是说说而已。在NodeJs及其衍生技术高速发展的同时，Nw和Electron的问世，更是为前端发展提速不少，依稀记得哪位前辈说过，“能用Js改写的，终将用Js改写”，这不，客户端来了！使用Electron也有一段时间了，各种...
云E办Springboot+vue——前端项目完整版（含源码）
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
Vue服务端渲染业务入门实践
努力奋斗的超人
03-04 5165
背景 最近， 产品同学一如往常笑嘻嘻的递来需求文档， 纵使内心万般拒绝， 身体倒是很诚实。 接过需求，好在需求不复杂， 简单构思 后决定用Vue， 得心应手。 切好图， 挽起袖子准备撸代码的时候， SEO同学不知何时已经站到了背后。 "听说你要用Vue?" "恩..." "SEO考虑了吗?整个SPA出来，网页的SEO咋办?" "奥..."
vue服务端渲染
qq_42880714的博客
07-21 1352
vue 服务端渲染
vue-服务端渲染6：client/server-entry.js
weixin_33847182的博客
04-16 610
import createApp from './create-app' export default context => { return new Promise((resolve, reject) => { //异步操作，让server-render知道什么时候结束 const {app, router} = createApp() router.pus...
Vue服务端渲染
weixin_43779565的博客
11-29 279
一、简介 Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行 ...
1. 服务器端渲染(SSR)简介
包磊磊的博客
05-20 2517
1. 服务器端渲染(SSR)简介 1.1 什么是服务器端渲染(SSR)？ Vue.js 是构建客户端应用程序的框架 默认情况下浏览器输出Vue组件，生成DOM并操作DOM 服务器端渲染则是服务器端生成静态的HTML字符串，浏览器将静态标记“混合”为客户端可交互的应用程序 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行 1.2 为什么使用服务器端渲染(SSR)？ 与传统 SPA（Single-Page Applica
从零开始搭建Vue服务端渲染项目（一）：BFF层搭建
hd101367816的博客
04-04 2035
写在前面 由于公司业务需求，需要我搭建一个SSR（同构渲染）架构。之前CSR（客户端渲染）项目选择的技术栈是Vue.js，那为什么不用Vue社区的Nuxt.js搭建一个开箱即用的SSR环境呢？因为我们的前端项目还有一个BFF（BackEnd For FrontEnd）层，故不能使用Nuxt.js，我们需要将SSR糅合进公司之前搭建的BFF层，这又是一个全新的挑战了，所以这边要写一篇关于Vue SSR的文章来记录一下。 由于我们接下来要用到的SSR项目需要运行在BFF层，所以这篇专栏会将BFF层和SSR一起搭
Vue-cli 3.0快速搭建Vue项目指南：从零开始
本文将详细介绍如何使用Vue-cli 3.0来搭建Vue前端项目，这是一款官方推荐的Vue.js项目构建工具，能简化开发流程并提供一系列配置选项。以下是搭建过程中的关键步骤： 1. **环境准备**： - 首先确保安装Node.js，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱学习的前端小黄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值