vue前端docker打包 vue前端打包部署运行

遇到的问题为vue项目webpack-dev-server配置后本地连接服务器地址正常请求，但是打包之后请求服务器接口一直是404；

Vue前端打包：

1.npm run build:prod 打包
2.npm run preview 打包正式环境预览

.env.product(生产环境配置)文件，我这边是将接口地址也放到了里面VUE_APP_API_URL

vue.config.js文件 反向代理及路由重写

.env.product和vue.config.js文件进行修改后即可打包npm run build:prod;

服务器宝塔面板部署dist文件（服务器windows系统）

部署分为有域名部署和无域名部署，部署有两种方式

首先第一种：PHP项目直接点击添加站点

域名：有域名的可以输入域名没有域名的也可以直接写当前服务器地址加放行的端口号，都会指到当前站点。

根目录：我们将打包的dist文件夹放置wwwroot文件夹下任意目录。选择即可

备注：你想备注的名字用于在项目部署较多情况下清楚知道是那个项目

其他参数基本不需要修改，直接点击提交即可。

以上就成功部署你的dist项目了。

点击右侧设置，里面有很多项，配置文件则是Nginx配置，里面还有配置反向代理之类的。

着重说一下配置文件，因为我打包部署的时候遇到了一个问题：本地跑并且链接服务器服务正常访问，但是打包之后一直报404，访问失败，最后网上搜了很多发现还是代理的问题。

一般来说若依的baseapi都是dev-api或prod-api，线上的当然是prod-api了，在这里进行一下路由重写，重新写道我们的服务器地址。就可以解决404的问题了

location /prod-api/ 
	{
   		rewrite  ^.+api/?(.*)$ /$1 break;
   	 	proxy_pass http://xxxxxxxxxx/;
	}