# vue-render

**Repository Path**: coder128/vue-render

## Basic Information

- **Project Name**: vue-render
- **Description**: vue 的服务器渲染项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-23
- **Last Updated**: 2022-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Server Render
> vue的服务端渲染，在服务器端渲染意味着可以直接在服务器编写代码并且和客户端一起打包

## 原生运行
> 这样编译出来的html文件是可以在本地直接运行的，但是这样的运行是不能具有服务器的接口，如果需要则需要搭配其他后端，例如java、python等

## 环境安装
> 安装方式很简单
```bash
npm install
```

## 运行
> 目前只有一种运行模式，后续会添加更多，只需要
```bash
npm run serve
```
> 这种是监听编译模式，在这种模式会自动打包并执行打包后``server.js``文件，模式是以子进程进行运行的

## js拆分
> 这边使用webpack进行服务器的操作，如果要拆分可以从 ``webpack.client.js``这里进行拆分，例如
```javascript
module.exports = {
  ...
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            let modulePaths = module.nameForCondition().split(/[\\\/]/);
            let nodeModuleIndex = modulePaths.indexOf("node_modules");
            return modulePaths[nodeModuleIndex + 1];
          },
          chunks: "all",
        },
      },
    },
  },
  ...
};


```


## 配置文件介绍
一共有三个配置文件，分别``webpack.server.js``,``webpack.bundle.js``,``webpack.client.js``,其中，可以分为服务端和客户端文件

``webpack.server.js``，相当于服务器的文件，这个只能处理服务端相关的东西，不能处理任何客户端数据
``webpack.bundle.js``，这个文件有点特殊，它是服务器端但是又是客户端，因为它运行在服务端。这个文件简要说明就是``让服务端拥有处理文件的能力``例如vue、html、css、scss文件等，它不需要输出文件，最好也不要让它输出文件，这个是服务器因此它是没有``document``的。
``webpack.client.js``，这个文件就是负责客户端的渲染，例如打包输出文件，以及其他的文件处理，这个文件拥有``document``但是没有服务器端的能力，例如fs模块