未打包前,前端vue可通过proxy解决跨域问题,当打包上线之后,内置代理将会失效,我们需要使用nginx来解决跨域问题。
首先,通常打包都是使用npm run build命令来进行打包的,但有时间也不一定,可以查看package.json文件scripts下build直接执行即可;
执行完后会生成一个dist文件,里面会将静态文件打包成static和一个index主页;
安装Nginx之后
我们将dist文件放到nginx中的html文件夹下,再进入conf文件夹下的nginx.conf配置文件进行修改
执行nginx命令,start nginx, //关闭nginx nginx -s quit //重启nginx nginx -s reload
打开网页localhost:8888就会显示主页面了。
其中心得:我们有时候需要采用逆向思维,例如跨域问题,我们可以从请求网页中找信息,看请求信息的地址url是否有/prod-api拼接,如果没有,肯定会出现后台数据访问不到的现象
跨域的目标地址,因为服务器端也是在本机,所以直接使用127.0.0.1:+端口即可;(不要使用映射地址,不然会出问题,访问不到)。