问题描述:
We’re sorry but “XXX” doesn’t work properly without JavaScript enabled
一、前端vue项目打包
1.安装Node.js
安装必要的软件,前端使用的是vue,需要安装node.js, 安装教程可参考:
https://www.runoob.com/nodejs/nodejs-install-setup.html
2.项目打包
前端vue项目打包生成dist 文件夹,dist文件夹中就是打包好的静态文件;
代码如下:
// vue 项目打包命令
npm run build
二、服务器端
1.服务器端安装nginx
服务端安装nginx,使用nginx做为web的静态服务器,安装教程参考:
https://www.runoob.com/linux/nginx-install-setup.html
修改的配置文件位置命令:
whereis nginx.conf
2.配置nginx.conf 文件
通过配置nginx.conf 文件映射到我们放置静态文件的文件夹中
配置文件修改如下:
// 打开配置文件
vim conf/nginx.conf
// 进行编辑,在打开的文件中,按 i 可以进行编辑
i
// 将 root 后面的html文件夹修改为自己上传的前端项目的文件夹
// 本文中使用的是wacp,并且我的文件夹是在html文件夹下,所以文件目录是 html/wacp
// 如果是其他的文件夹,通过 pwd 命令获取到文件路径,将文件路径拷贝到root 后面即可
// 退出编辑模式:按下键盘中esc键
esc
// 保存修改:shift + :+ wq 保存配置
// nginx 刷新配置文件:在nginx 目录下,进入sbin目录中执行以下命令
./nginx -s reload
// 此时可以通过 服务器ip | 域名 在浏览器中进行访问,端口默认是80,可以不用添加
配置文件修改图片如下:
3.出现404问题
nginx配置文件增加配置如下:
// 解决post请求出现404问题,增加下面配置信息
try_files $uri $uri/ /index.html;
nginx配置文件增加配置如图:
4.出现405问题
当使用post方式请求后端接口的时候会出现405 not allowed
nginx配置文件增加配置如下:
// 解决post请求出现405问题,增加下面配置信息
error_page 405 =200 http://$host$request_uri;
nginx配置文件增加配置如图:
5.出现(We’re sorry but “XXX” doesn’t work properly without JavaScript enabled. Please enable it to continue)问题
请求后端接口的时候出现以上的报错,在网上很多说将router 修改history模式改成hash模式,但是我这边修改并不能生效。原因是nginx不能正确的解析到后端的地址。
nginx配置文件增加配置如下:
// ip 是后端项目发布的服务器的ip,port是后端允许访问的端口,即项目端口
// api 是前端使用的请求后端的时候的基础uri
location /prod-api/ {
proxy_pass http://ip:port/;
}
// 保存并刷新nginx 配置
./nginx -s reload
前端配置如图:发现nginx配置得后端为prod-api,而前端配置得是 baseUrl : ‘/dev-api’,造成不一致导致问题,把前端配置改为prod-api就正常不报错了。