比如我们Vue项目的vue.config.js配置如下(不需要修改): 期望能将/api/为前缀的请求全都代理到 http://0.0.0.0:8080/,本地以开发模式运行一切正常,但发布到Nginx后这个代理好像就失效了,api开头的请求都会404错误 1module.exports ={2publicPath:'/',3devServer: {4port:8081, //访问此项目(VUE项目)的端口5...
出错打包配置assetsPublicPath:'./', 正确打包配置assetsPublicPath:'/blog/', 就是这个assetsPublicPath资源路径忘记配置惹了N多麻烦, 留下了不学无数的眼泪,如果有遇到同样场景的同学记得核实 nginx.conf 有两种配置方式,均验证有效 方式一: location /blog { root /usr/local/nginx/html/; index index.htmlinde...
首先打包时,vue.config.js配置 publicPath:/tjyy/ router配置 constrouter=newRouter({routes,mode:'history',base:'/tjyy/'}) nginx配置文件中配置 location/tjyy{root xxx项目路径;rewrite^/tjyy/(.*)$/$1break;index index.html index.htm;try_files$uri$uri//tjyy/index.html;} 如配置在根目录下,...
在nginx中配置vue项目的时候,类似于location /XXX {}这种,会出现很多问题,比如404,403,刷新404等等情况,还是没有搞懂什么原因,不过却找到了解决方法,记录一下,防止忘记! 1. 修改vue项目中vue.config.js文件中的publicPath在生产环境中的子路径 publicPath: process.env.NODE_ENV === "production" ? "/子路径" ...
nginx location / { try_files $uri $uri/ /index.html; } 1. 2. 3. 然后就没了... 这里我们需要清楚为什么会报404: 我们用nginx部署项目,然后在地址栏输入 http://dev.mds/(这里配置的端口是8080),你会发现地址栏之后会变为 http://dev.mds/home,并且 看起来一切正常, 似乎路由也可以正常切换而不...
2、修改build下静态资源路径前缀 同上一部,这里要修改assetsPublicPath为/vuejs-admin/地址 3、执行vuejs打包:npm run build 确保打包后所有静态资源均是相对地址/vuejs-admin开头,比如: 4、修改nginx配置,使用rewrite配置 代码语言:javascript 复制 server{listen80;server_name xxxx.com;#charset koi8-r;#access_...
查找很久,刚开始以为是nginx的锅,后来才发现,原来是我改成相对路径导致的 assetsPublicPath: './', 项目中config文件夹下index.js中,默认是"/",因为本地打开build时页面空白,所以修改成相对路径"./",结果影响到部署服务器了。因为我的路由模式是history,而且存在多个子路由。所以应该改成绝对路径。才能正常引入vu...
2.3、assetsPublicPath打包方式为绝对路径 image.png 3、具体Nginx配置 我们的项目URL是:http://fat2.test.cn/wap 在/etc/nginx/conf.d目录下,新建一个fat2.test.cn.conf的配置文件,内容如下: server { listen 80; #监听的端口 server_name fat2.test.cn; #监听的URL ...
baseURL保持为空,会使用nginx统一配置,也可提前配置,但最终必须与nginx请求代理配置的识别字段保持一致。 vue.config.js文件 publicPath填写为你想区分项目的对应后缀字段 没得后缀,就直接 '/'。这里必须严格按照这样填,不然资源路径会出错导致请求不到,把我整麻了。
404报错原因: 当我们设置了mode为history时,当前端发送路径给服务端时,服务端根本就不认识省去#的url,所以返回给我们404,因为vue是单一页面所有的页面都在index.html中,vue是用js来切换页面的,具体的解释看vue官网 解决办法: nginx服务器修改 location / { if (!-e $request_filename) { rewrite ^(.*)$ ...