技术栈:vite2+nginx
前言:该文章对vite中使用mock的一个补充,使用过程可以看之前的文章,以及对生产环境打包在nginx发布的一些问题的解决记录
一、vite-plugin-mock相关
1、根据官方文档描述,开发环境是使用Connect中间件实现的,可以控制台中查看网络请求记录。生产环境则是通过拦截请求,所以在网络请求中查看不到
2、在使用mock时,通过axios调用接口,不能加上baseURL,否则会变成通过发送网络请求,在网络请求里可以查看到。因为上条所说在开发环境时使用Connect中间件所以没有影响,但是到生产环境就无法拦截到了,导致失败。所以最好两个环境都不加baseURL
3、如果不需要使用该功能,则在vite.config.ts中将localEnabled和prodEnabled都设置为false即可。当然另一种方式是加上baseURL,但是不推荐
二、build后在nginx发布相关
1、在npm run build后在nginx中运行,发现对于post请求会报“405 Method not allowed”的错误,原因是大多数web服务器,都不允许静态文件响应post请求。我通过在nginx.conf中添加如下代码解决
location / {
# root html;
root vue-dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
error_page 405 =200 $uri; # 添加该语句,将post的状态码从405改成200即可
}
2、在nginx中,修改完nginx.conf文件中的配置后,需要到有nginx.exe的目录下调用CMD或者Git Base执行./nginx -s reload
重新加载才行,不然不会生效。当然还有重启电脑以及杀死进行重新运行两种方式,不推荐