1、打包vue项目
npm run build
2、部署一个nginx来做服务器,下载安装就不多说了,历史教程也有。重点是配置静态资源。
打开conf/nginx.conf文件,端口默认80要改可以改下。主要是要把root改成你打包网站的存放目录。
server {
listen 80;
server_name localhost;
location / {
root D:\发布网站\project;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
改完配置把nginx启动起来即可。
接下来刷新页面会出现404的现象,我提供几个解决方案。
方案一
去掉这行代码。url上会出现带有#的地址。
mode: 'history',
方案二
在nginx配置文件中调整下,没试过,我用的是方案三。
location /{ root /data/nginx/html; index index.html index.htm; if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; } }
方案三
也是调整nginx配置文件,红色字体为添加的内容,即可实现刷新页面。
location / {
root D:\发布网站\project;
#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
try_files $uri $uri/ @router;
index index.html index.htm;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
参考链接:https://segmentfault.com/a/1190000016653688