| 如何进行vue项目的部署 | 您所在的位置：网站首页 › vue项目下载网站 › 如何进行vue项目的部署 |
如何进行vue项目的部署
|
如何进行vue项目的部署
如何进行vue项目的部署前言部署方案方式1实现方式2实现
前言
在一开始接触vue尤其是初次进行打包后，我就有一个疑问，vue项目是怎么进行部署的？直接点开打包后的 index.html 后会得到下面的报错 这里页面发送的请求不是我想象中的http://ip:port/api/api1的格式，而是file:盘符:/api/api1的格式，这意味着index.html就只是一个html文件，打包只是把vue文件做了压缩处理。 后来在网上找到了答案： devServer 只是一个webpack插件 只能用于开发环境。 使用webpack-dev-server(下简称wds)进行开发时，wds启动了一个运行在node上的web服务器，此时开发环境访问对应的端口时(以8080举例)，浏览器返回的vue页面是wds处理后的结果。 devServer的proxy是为了简化开发环境下的跨域请求配置。当发现符合在devServerproxy中配置好的请求格式时，将该请求拦截下来，由自己去请求服务器获取响应，然后把该响应返回给前端页面，即相当于一个传话筒。 编译打包后，前端页面成为了单独的静态资源，wds被抽离出去了。但是资源要被访问，那必然还是需要有另一个web服务器来装载它，这个服务器常见的就是nginx。 部署方案之后百度逛了一圈后，基本就以下两种部署方案： 一种是将vue打包后放在springboot项目的resource下的static文件夹下，将vue当成一个静态资源去访问，部署相对方便，能跟springboot项目一起被打成jar包，启动方便。用ngnix去做代理，vue、springboot分开部署，相对第一种麻烦，但分开部署的好处是不会相互影响。 方式1实现vue打包后格式为 放置在static下的格式为 是将vue打包后的static下的文件夹与index.html并列放在springboot的static下。 springboot项目启动后访问路径为 http://ip:port/xxx/index.html（xxx为项目前缀，如果没有设置则不写。如果有做静态文件请求的拦截，记得放开。） ps：这里需要注意的是在vue中axios在springboot启动后的路径会被拼接为 http://ip:port/xxx/api，ip、port分别为springboot项目的ip、端口 const axios= axios.create({ baseURL: '/xxx', timeout: 6000000 // request timeout }) 方式2实现vue端使用nginx部署，首先cd到你的nginx安装路径下 ,修改配置文件后启动。 启动nginx命令： ./sbin/nginx 停止nginx命令： ./sbin/nginx -s stop 重启nginx命令： ./sbin/nginx -s reload 下面是linux下的配置文件部分配置 这里给出的是示例，具体需要按自己项目来 server { #端口 listen 8081; #ip地址 server_name localhost; #这里为项目访问的根路径，以及默认访问的文件 location / { #将你打包后的dist放到root设置的路径下 root /usr/local/dist; #这里默认即可 index index.html index.htm; } #请求代理配置到你后端启动的地址 location /api { proxy_pass http://localhost:8080/api; } }示例启动后（后端启动端口为8080）效果为： 访问路径 http://localhost:8001/ 前端请求 /api/test 会被代理为 http://localhost:8080/api/test （如果前端和后端在不同的机器上启动需要把localhost改为后端的服务器ip） 在linux部署记得把端口放开，访问前最好ping一下，排除网络对部署结果的影响。 以上内容为个人学习记录，如有问题，还请提出，共同学习进步。 |
这里就有一个疑问了，因为前后端分离，我在项目中在vue.config.js文件中设置了代理，但是为什么打包之后代理就失效了呢？
【本文地址】