背景
脚手架版本号:vue cli 3.x
项目路由:vue-router
的History
模式
原理:url路由处理逻辑从后端转移到前端。
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/History_API
安装nginx
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://www.cnblogs.com/jiangwangxiang/p/8481661.html
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90