项目打包
我们开发用的脚手架其实就是一个微型服务器，用于：支撑开发环境、运行代理服务器等。
打包完的文件中不存在：.vue、.jsx、.less等文件，而是：html、css、js等。
打包后的文件，不再借助脚手架运行，而是需要部署到服务器上运行。
打包前，梳理好前端项目的ajax封装（请求前缀、代理规则等）
比如开发环境请求前缀为.dev，生产环境为.prod;
配置在vue.config配置proxy代理
打开package.json查看build命令，执行打包命令npm run build，之后将得到dist文件夹（包含打包后的静态文件）
本地服务器部署
使用express框架在本地创建一个服务器
安装express到启动服务器
(提前安装node)
-
新建一个文件夹，执行
npm init -y命令，生成package.json，再执行npm add express命令，下载express. -
使用热部署（nodemon）进行启动（修改代码后不必重新启动服务器）安装命令：
npm i nodemon -g -
新建文件server.js，写入代码：
const express = require('express') const app = express() const port = 8080 // 配置静态资源 app.use(express.static(__dirname + '/public')) app.listen(port, () => { console.log(`本地服务器启动http://localhost:${port}`) }) -
创建文件夹public，将打包dist下的文件移动到public
-
终端输入
nodemon .\server.js，启动服务器。
得到如下文件树：
解决问题
出现两个问题：
- 刷新页面出现404（因为router后缀被理解为后端…）
- 请求无法发送（因为未处理跨域问题）
解决刷新404问题
法一：打包前修改路由配置，使用hash模式（缺点：路径有#不美观）
法二：使用node相关的库(connect-history-api-fallback )
- 安装：
npm install --save connect-history-api-fallback
- 在server.js中添加代码：
let history = require('connect-history-api-fallback')
app.use(history())
完整代码如下：
const express = require('express')
let history = require('connect-history-api-fallback')
const app = express()
app.use(history())
const port = 8080
// 配置静态资源
app.use(express.static(__dirname + '/public'))
app.listen(port, () => {
console.log(`本地服务器启动http://localhost:${port}`)
})
请求无法发送问题
使用node相关的库(http-proxy-middleware )
- 下载
http-proxy-middleware
npm i http-proxy-middleware
-
在server.js中添加代码：
const { createProxyMiddleware } = require('http-proxy-middleware') app.use( '/prod-api', createProxyMiddleware({ target: 'https://heimahr.itheima.net/api', changeOrigin: true, pathRewrite: { '^/prod-api': '' } })
nginx服务器部署
安装到运行
-
搜索nginx下载并解压
-
基本使用：双击启动nginx.exe服务；注意每次修改后都需要重新启动nginx服务（通过任务管理器关闭nginx后再次启动）
-
更改配置：conf/nginx.conf后运行自己打包的文件
location / { root D:\dist; #此处设置为打包后的dist文件夹 index index.html index.htm; }
解决问题
问题和本地服务器时一样：刷新404、请求无法发送
刷新404问题
location / {
root D:\dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;#解决刷新404
请求无法发送问题
location /prod-api/ {
# 设置代理目标
proxy_pass https://heimahr.itheima.net/api/;
}
云服务器部署
- 前提要有一个属于自己的云服务器，并下载好liunx系统
- 本地电脑安装Xftp、Xshell软件（Xftp用于传输文件，Xshell用于编写命令）
阿里云白嫖+配置
按步骤完成阿里云服务器创建，接下来是配置部分
关于Xftp和Xshel的连接远程服务器
点击新建，然后输入主机地址，点击连接，接着根据提示输入用户（默认是root）、密码，如下图。
部署
本地资源上传
使用Xftp将dist打包内容移到var/test1(新建文件夹)下
这里自己选择（建议不要放在root文件下面，会有权限的问题）
进入Xshell终端，输入yum install nginx安装nginx；
nginx配置
进入etc/nginx文件夹下的/nginx.conf进行配置
server {
listen 80;
listen [::]:80;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
# 自己配置打包内容，将root改为刚才放置在var文件夹下的内容
location / {
root /var/test1;
index index.html index.htm;
try_files $uri $uri/ /index.html;#解决刷新404
}
#设置代理目标（有需要设置）
location /prod-api/ {
# 设置代理目标
proxy_pass https://heimahr.itheima.net/api/;
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
默认端口80
