vue2.0 打包,nginx部署

1、修改这里为空

否则报错:vue is undefined

2、修改为hash,重点:打包dist文件运行,必须这样

3、安装ngnix,重点:使用node的包:httpserve,失败

4、重点:配置代理转发

前端请求后端接口,用api前缀区分。

重点:后端地址很重要,因为没有加api,返回404,淘宝找两人解决问题,花了200rmb。

错误的配置:

location /api {
            proxy_pass http://test.abc.com//;#注意这里/和不加/区别很大哟
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
}

正确的配置:

location /api {
            proxy_pass http://test.abc.com/api/;#注意这里/和不加/区别很大哟
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
}

使用正确的配置后多了api的后缀,然后就不报404,成功部署。

到此耗时两天。

有点厌倦程序员的生活了,永远做不完的事情,解决不完的bug。

但是也要努力,奋斗。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2.0中,通常是通过配置webpack来设置proxyTable。ProxyTable是一个用于配置跨域请求代理的功能,用于处理在开发过程中,前端请求后端API接口时可能会出现的跨域问题。通过设置proxyTable,可以将前端请求代理到后端的某个路径上。这样就可以实现在开发过程中绕过跨域问题,方便前端开发和调试。 在Vue 2.0的配置文件中,默认的配置是没有proxyTable的选项的。但是我们可以自己手动添加proxyTable,并且配置相应的代理规则。一般来说,我们可以在config文件夹下的index.js文件中找到webpack配置的设置。 在index.js文件中,可以找到`dev`属性,它是用于开发环境的配置。在`dev`属性中加入`proxyTable`属性,并且配置相应的代理规则。例如: ```javascript module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:3000', // 目标主机 changeOrigin: true, // 开启跨域代理 pathRewrite: { '^/api': '/mock' // 修改请求路径 } } } } } ``` 上述配置就是将以`/api`开头的请求,代理到`http://localhost:3000`主机下,并且将`/api`替换为`/mock`。这样在开发环境中,前端请求`/api`时就会被代理到`http://localhost:3000/mock`。 需要注意的是,以上配置是适用于Vue CLI的默认配置,如果你使用了其他方式创建Vue项目,可能会有一些差异,具体可以参考对应的配置文件。另外,在生产环境打包时,不建议使用proxyTable,因为打包后的代码会被部署到生产环境中,请求地址应该是指向部署后的后端服务。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值