vue配置静态路径后使用history模式配置nginx

慢半拍、

于 2020-09-22 15:21:12 发布

阅读量727

点赞数

分类专栏： vue 文章标签： nginx vue history publicPath

本文链接：https://blog.csdn.net/huanhuan03/article/details/108732585

版权

vue 专栏收录该内容

55 篇文章 6 订阅

订阅专栏

后端说要加一个路径的前缀（/mp）。

本来可以在vue3-4(vue.config.js里面配置publicPath)或者在vue2.0(config里面index.js配置assetsPublicPath)

但是项目用了history模式，用的nginx代理，然后就打包找不到页面了，然后就照着官网的说明开始配，配置如下：

server {
    listen 9009;
    server_name localhost;

   location /prepaidApi {         # 这是配置反向代理的接口前缀
	   client_max_body_size 10m;
	   proxy_set_header Host $http_host;
	   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	   proxy_pass  http://192.168.0.111:8000/;      # 后端接口ip
    }
  
	location /mp {    # 这是静态的路径前缀
		alias D:/zhh/pre-wx/dist/;        # 这是项目所在地址
		index index.html;
		try_files $uri $uri/ /mp/index.html;    # 这是配置history
	}    
}

你以为到这里就完了吗，不！还要在路由里面配一下base: '/mp'，要不你还是找不到页面。

路过若有大神，请不吝赐教~