Vue.js服务器端渲染与Vue路由器:分步指南
当我开始使用Vue收集有关SSR(服务器端渲染)的信息时,我必须从不同的文章以及官方文档中获取相关信息,以便全面了解这个主题。
以下是我在这些来源中发现的一些问题:
很多关于你应该拥有的信息的假设,比如Webpack配置,连接Vue Router等的正确方法。
缺乏一些重要的信息,并留下一些读者填写的空白。
在给出的例子中,大多数不遵循官方文件提供的标准和最佳实践。
本文的目的是提供您可能需要的所有信息,以便使Vue Router与SSR一起工作,为避免任何可能会让您稍后头疼的差距做出额外的努力。我也尝试尊重所有Vue团队的建议。
途径
在进入实际实施之前,您需要了解一些主要概念:
SSR涉及在服务器上为请求的路由创建应用程序的完全加载版本。一旦该页面在客户端呈现,客户端代码将获得所有权。
你需要为你的应用程序需要两个入口构建点,一个用于服务器,一个用于客户端。
考虑到这一点,我们将在这篇文章中完成:
安装所需的依赖关系
Webpack配置
NPM构建脚本
文件夹结构
应用配置
设置Vue路由器
客户入口点
服务器入口点
服务器配置
让我们希望这个例子给这个主题带来一些清晰!
依赖
我们来看看我们将要安装的依赖关系:
1.我们将使用一个已经具有VueJS应用程序的基本Webpack配置的模板。我们还需要安装vue-cli:
#install vue-cli
npm install -g vue-cli
#create project using webpack-simple
vue init webpack-simple vue-ssr
现在我们需要安装webpack-simple模板的所有依赖关系。在此之前,我们没有做任何与SSR有关的事情。我们只是建立一个通用的VueJS环境。
#go to project folder
cd vue-cli
#install dependencies
npm install
2.所以现在我们有一个VueJS项目开始添加SSR配置。在我们做之前,我们需要添加三个与SSR相关的依赖关系。
#install vue-server-render, vue-router, express and webpack-merge
npm install vue-server-renderer vue-router express webpack-merge --save
vue-server-render:SSR的Vue库。
vue-router:SPA的Vue图书馆。
express:我们需要运行一个NodeJS服务器。
webpack-merge:我们将使用它来合并webpack配置。
Webpack配置
我们将需要两个Webpack配置,一个构建客户端入口文件和一个构建服务器入口文件。
我们先来看看Webpack客户端配置,这也将成为我们的服务器入口配置的基本Webpack配置。我们只是要使用我们安装的模板附带的一个,除了我们正在改变条目entry-client.js。
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/entry-client.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue