Vue项目打包详细过程（非nginx代理配置）

最新推荐文章于 2024-04-07 14:44:37 发布
最新推荐文章于 2024-04-07 14:44:37 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： 项目相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42215452/article/details/114365130
版权

Vue项目打包部署至阿里云ECS

将项目入口文件中含有跨域连接的地址改为服务器地址

在这里插入图片描述
将Config目录下index.js中的build中的assetsPublicPath修改为’./‘
在这里插入图片描述
在build目录下util.js中添加publicPath
在这里插入图片描述
同样build目录下的webpack.prod.conf.js中添加publicPaht
在这里插入图片描述
终端输入npm run build打包得到dist文件夹
在这里插入图片描述
打开finalshell（xshell也行，只要能与云服务器建立连接传输文件就可以），在服务器下的任意目录中创建项目文件夹，并将除去node_modules以外的其他文件都上传进去
在这里插入图片描述
然后终端输入cd命令移动到项目文件夹下运行npm install下载依赖包（就是node_modules），最后移动到server目录下的入口文件，运行node命令即可在网页中利用网址打开自己的项目

nITIYUe
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue中跨域及打包部署到nginx跨域设置方法
10-16
主要介绍了Vue中跨域以及打包部署到nginx跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vuejs+vue-router打包+Nginx配置的实例
10-17
在项目基于vue-cli构建时，配置文件`/config/index.js`中的`build.assetsPublicPath`默认设置为'/'，这可能导致在部署到服务器时出现问题。许多教程建议将其更改为'./'，以使静态资源在本地运行时正常加载。然而，...
vue项目打包部署_nginx代理访问方法详解
01-19
我又来了，今天部署了下vue项目，使用nginx做了代理，这样可以解决跨域的问题，这里做一个简单讲解。 1、先看vue项目打包（我这里使用的是vscode开发工具） 这里是我的项目结构： 打包之前需要修改如下配置文件： 配置文件一：build>>utils.js (修改publicPath:”../../” , 这样写是处理打包后找不到静态文件的问题) 配置文件二：config>>index.js(修改assetsPublicPath:’./’ ,修改目的是为了解决js找不到的问题) 上面两步修改完成之后就可以进行打包了 在控制台终端输入npm run build 坐等打包 打包完成之
云服务器部署vue项目
qq_39187593的博客
08-28 935
vue项目进行npm run build的命令， 生成一个dist包。记得开放对应的端口号。
vue 不同环境打包指令的配置（vue-cli2、vue-cli3、vite）
最新发布
lx6091543wwwcctv的博客
04-07 751
一个项目可能会有开发版本、上线版本、测试版本等等多个版本，不同的环境会有不同请求api接口，就需更改一些基本配置，这时候为不同环境配置不同的打包指令就很必要。
vue项目部署到服务器
strivew的博客
04-19 4950
vue项目启动和打包部署到服务器
Vue项目的部署(服务器)
抗争小青年的博客
09-24 3810
Vue项目的部署(服务器) 前几天帮朋友写了一个可以动态查看地点温度的前端项目。目前已经部署上线了，访问链接点这里。 效果图： 图一： 图二： 当然，温度也都是实时跟新的,而且根据气温高低，排出气温t
不用Nginx，Golang如何部署Vue应用呢？
weixin_51507240的博客
04-08 1862
这个问题已经困扰了我将近一年了，去年刚开始学习golang的时候，就想过能不能通过golang的静态资源服务器来部署vue打包后的资源呢？
spring boot+vue+nginx前后端分离详细部署过程心得！（不包含nginx集群和负载均衡）
weixin_42562259的博客
09-13 608
前期准备：spring boot项目，vue，服务器（或者linux虚拟机可联网） 环境准备：服务器上有数据库，java环境即可！（java会打包，vue使用build打包项目） 1、安装nginx到服务器（虚拟机） 下载的相关包： nginx安装包 pcre安装包（处理请求中的json数据） openssl（支持HTTPS访问） zlib（解压，必须下载） 2、使用fazillia或者xftp上传文件到目标文件夹下面（一般在linux的 /usr/local/nginx下面）解压， ...
vue项目部署方式:tomcat部署和nginx部署
CnNoter
03-15 1382
LINUX 发布 VUE项目 关于vue部署 1.nginx转发 一般项目前后端分离得话，都会用nginx作为反向代理转发的。 因为项目要兼容ie9,使用axios发ajax请求的时候,不能通过CORS解决跨域的问题,所以尝试部署nginx作反向代理. 参考:vue+webpack+vue-router(history) 部署到nginx服务器下，非根目录，前后端怎样配置文件？ nginx配置p...
【跨域代理】Vue proxy正向代理 及与nginx反向代理的区别
坚信万物皆可切的切图仔
11-18 4233
前言 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同时就会造成跨域。 跨域问题一般有两种解决思路： 正向代理：“一台代理服务器"代替了"客户端”，去和"目标服务器"进行交互，即代理客户端。 用途：隐藏客户端真实IP，突破限制访问外国网站。 反向代理：“一台代理服务器"代替了"目标服务器”，去和"客户端"进行交互，即代理服务端 用途：隐藏服务器真实IP，提供负载平衡，即指向后端的多台服务器中空闲的一台； 而我们一般在开发中解决跨域是利用反向代理的原理。例如vue项目中配置proxy代
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
11-20
本地开发没问题能正常请求到接口，部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题。 经过查询得知：Remote Address代表的是当前HTTP请求的远程地址，即HTTP请求的源地址。 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的，而部署到服务器后相当于换了个环境（ ip地址和端口已经改变 ），此时proxy代理就出错了。 解决方法： 地址错误了，那就换到正确的地址。 即：本地开发环境 代理时用127.0.0.1，生产环境用服务器的ip 在Vue
vue打包使用Nginx代理解决跨域问题
12-09
vue 在开发环境，涉及跨域，就在本地配置了代理，但是部署到服务器上，就不行了。 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址，再build 推荐 ...
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
Vue项目打包部署总结配合nginx部署
weixin_52901235的博客
03-10 2812
启动后，正常情况下，直接访问http://服务器ip 或 http://域名 （本文测试用的服务器没有配置域名，所以用ip，就本文而言，域名和ip没有太大区别）应该就能看到nginx服务器的默认页面了——如果访问不到，有可能是你的云服务器默认的http服务端口（80端口）没有对外开放，在服务器安全组配置一下即可。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹，剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里，比如同步到之前步骤中创建的/www。H5新增了history的。
Vue项目打包后Proxy失效的问题
热门推荐
m0_37568655的博客
05-06 1万+
Vue项目打包后Proxy失效的问题 在vue.config.js中配置了proxy跨域后执行npm run build打包部署到服务器上会报跨域问题，为什么会报错呢？因为编译打包后，前端页面成为了单独的静态资源，代理服务器devServer.proxy被抽离出去了。也就是说，devServer.proxy不会一起打包到dist文件夹下，所以相当于我们没有配置代理服务器！！ 怎么解决呢？资源要被访问，那必须要有一个代理服务器来装载它。我们部署上线最常见的就是使用nginx进行反向代理，只需要修改nginx配
vue+springboot前后端分离项目部署到云服务器（一篇搞定所有步骤，从无到有）
weixin_63583875的博客
12-28 1611
使用tomcat9简单部署我们的vue+springboot前后端分离的项目到阿里云服务器，其他服务器也类似，教程全面简单，0linux基础也可以部署自己的个人项目，绝对容易。
vue不是用nginx 配置代理，对生成环境的接口配置
PT1993的博客
04-09 1158
1.在config文件夹下的，prod.env.js文件配置 module.exports = { NODE_ENV: '"production"', BASE_API: '"http://xxx.com:8080"'//服务请求的接口信息 } 2.在axios配置baseURL axios.defaults.baseURL =process.env.BASE_API;...
vue项目前端部署的三种方式
weixin_40496191的博客
01-24 8148
这里写自定义目录标题1. 通过tomcat部署2. 通过springboot部署3. 通过Nginx部署 1. 通过tomcat部署 准备一个空的tomcat服务器 删除tomcat的webapps底下的所有文件。 然后创建名称为project（名称为你的项目名）文件夹。 将Vue打包的文件拷贝到project底下，启动即可！ 2. 通过springboot部署 准备空的springboot项目 在resources底下创建static文件夹 将Vue打包的文件拷贝到project底下 pom配置
vue打包使用nginx代理解决跨域问题
05-01
在前端开发中，经常遇到跨域问题，特别是在使用vue进行打包后部署到生产环境时，很容易出现跨域问题。而要解决这个问题，可以使用nginx代理来解决。 首先，我们需要安装nginx，安装完成后，可以进入nginx的配置文件，一般路径为/etc/nginx/nginx.conf，然后在http模块中加入如下配置： ``` http { server { listen 80; server_name your.api.com; //这里填写你的API地址 location / { proxy_pass http://www.your.api.com; //这里填写你的API地址 add_header Access-Control-Allow-Origin *; //允许跨域请求 } } } ``` 修改完配置文件后，可以使用nginx命令重启nginx生效。配置完成后，我们就可以使用vue-cli中的axios进行跨域请求，在请求头部分加上 ``` proxy: '/yourapi' //这里填写你的请求API地址 ``` 即可完成请求代理。这样，通过nginx代理，我们就可以解决vue打包后的跨域问题了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值