Vue SSR 如何打包静态资源
在 Vue SSR 技术中，对于客户端和服务器端的渲染，会使用不同的打包方式。客户端渲染通常使用 webpack 进行打包，而服务器端渲染则需要将静态资源打包成简单的文件形式。本文将详细介绍 Vue SSR 如何打包静态资源，并提供示例代码进行指导。
一、打包客户端资源
在打包客户端资源时，我们需要使用 webpack 进行打包处理。Vue 官方提供了一个针对 SSR 的 webpack 模板工程，可以作为我们的起点。安装并使用该模板后，我们可以在 webpack 配置文件中进行相应的配置，以达到优化打包产物、减少打包时间等的目的。
- 入口配置
在 entry 中，我们需要添加客户端入口文件，代码如下：
entry: {
app: './src/entry-client.js'
}- 外部资源
和传统的 SPA 不同，因为服务器会进行渲染返回 HTML，所以我们需要将一些外部资源排除在打包范围之外，避免不必要的体积增大。在这里，我们可以通过 externals 配置来达到这点。这对于一些常用的库，如 Vue、Vue Router、Vuex 等是非常有效的。代码如下：
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex'
}- 输出文件
在 webpack 配置文件中，我们需要配置 output 部分，以指定我们想要输出的文件。由于客户端的渲染是在浏览器端进行的，所以我们输出的文件通常是 js 文件。代码如下：
output: {
filename: '[name].js',
chunkFilename: '[name].[hash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/'
}以上便是对于客户端静态资源的打包配置，接下来我们讲解服务器端静态资源的打包。
二、打包服务器端资源
在打包服务器端资源时，我们需要将它们打包成为简单的文件形式，以便于服务器端进行访问。由于 SSR 通常是通过 node.js 进行实现的，所以我们需要创建一个特定的 node.js 入口文件，处理并返回渲染后的 HTML。以下是服务器端资源打包的相关内容。
- 入口文件
我们需要为服务器端创建一个入口文件，并在其中引入服务器端渲染所需要的所有相关文件。代码如下：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ ------- ------- -- -
------ --- ----------------- ------- -- -
----- - ---- ------- ----- - - -----------
------------------------
----------------- -- -
----- ----------------- - -----------------------------
-- --------------------------- -
------ -------- ----- --- --
-
------------------------------------------- -- -
-- --------------------- -
------ ---------------------
------
------ -------------------
--
-
----------- -- -
------------- - -----------
------------ - -----------
------------
--
--
--
-- webpack 配置
服务器端的 webpack 配置与客户端略有不同，我们需要引入 vue-server-renderer/server-plugin 插件，用于生成服务器专用的 .json 文件。代码如下：
-- -------------------- ---- -------
----- ------------------ - --------------------------------------------
-------------- - ------------------------ -
------- -------
-------- -------------
------ -
------- -----------------------
-
------- -
--------- ------------
----- ----------------------- -----------
-------------- -----------
--
---------- ---------------
---------- --------
---
-------- -
--- --------------------
-
--- 输出文件
在服务器端打包成功后，我们会得到一个名为 server.json 的文件，该文件包含了渲染所需要的静态资源。代码如下：
-- -------------------- ---- ------- ----- -------- - ----------------------------- -------- ----- ------------ - ------------------ - -------------- ----- -------------- - ------------------ - ------------------------------- ----- -------- - ---------------------------------- - ---------------- ------ --------- -------------- --
在以上代码中，我们可以看到 server.json 被引入，并作为参数传入 createBundleRenderer 中，用于在服务器端进行渲染。
以上便是关于 Vue SSR 中如何打包静态资源的详细介绍。希望本文可以对您有所帮助，提供指导和启发。以下是完整的服务器端 webpack 配置文件和 webpack 插件的安装和使用：
webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ---------------
----- - ----- - - ------------------------
----- ------------- - ---------------------------------
----- ----------------- - --------------------------------
----- ------------------ - --------------------------------------------
-------------- - ------------------------ -
------- -------
-------- -------------
------ -
------- -----------------------
-
------- -
--------- ------------
----- ----------------------- -----------
-------------- -----------
--
---------- ---------------
---------- --------
---
-------- -
--- --------------------
-
--webpack 插件：
npm install vue-server-renderer
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782716c935627c90008a126
