`vue-router`的`History`模式下的项目发布

背景

脚手架版本号：vue cli 3.x

项目路由：vue-router的History模式

原理：url路由处理逻辑从后端转移到前端。

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

安装nginx

参考：https://www.cnblogs.com/jiangwangxiang/p/8481661.html

1.下载nginx

http://nginx.org/en/download.html         下载稳定版本，以nginx/Windows-1.12.2为例，直接下载 nginx-1.12.2.zip

下载后解压，解压后如下

2.启动nginx

有很多种方法启动nginx

(1)直接双击nginx.exe，双击后一个黑色的弹窗一闪而过

(2)打开cmd命令窗口，切换到nginx解压目录下，输入命令 nginx.exe 或者 start nginx ，回车即可

3.检查nginx是否启动成功

直接在浏览器地址栏输入网址 http://localhost:80，回车，出现以下页面说明启动成功

也可以在cmd命令窗口输入命令 tasklist /fi "imagename eq nginx.exe" ，出现如下结果说明启动成功

nginx的配置文件是conf目录下的nginx.conf，默认配置的nginx监听的端口为80，如果80端口被占用可以修改为未被占用的端口即可

检查80端口是否被占用的命令是： netstat -ano | findstr 0.0.0.0:80 或 netstat -ano | findstr "80"

当我们修改了nginx的配置文件nginx.conf 时，不需要关闭nginx后重新启动nginx，只需要执行命令 nginx -s reload 即可让改动生效

4.关闭nginx

如果使用cmd命令窗口启动nginx，关闭cmd窗口是不能结束nginx进程的，可使用两种方法关闭nginx

(1)输入nginx命令  nginx -s stop(快速停止nginx)  或  nginx -s quit(完整有序的停止nginx)

(2)使用taskkill   taskkill /f /t /im nginx.exe

vue项目发布

使用npm run build命令进行生产环境的打包。把vue项目的dist目录下的文件拷贝到nginx目录下的html目录。

然后修改nginx的配置文件是conf目录下的nginx.conf。

location / {
  try_files $uri $uri/ /index.html;
}

参考：

https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子