vue3项目的部署到阿里云服务器

已于 2022-03-23 15:40:43 修改
阅读量2.4k 收藏 8
点赞数
分类专栏： vue项目上线阿里云 阿里服务器 文章标签： vue vue.js cli
于 2021-06-05 20:47:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/preserveXing/article/details/117604859
版权
本文介绍了如何将Vue3项目部署到阿里云服务器，重点在于配置路由的base选项以避免路径冲突，以及在Vue3缺少webpack配置文件的情况下，如何创建vue.config.js进行自定义配置，确保静态资源路径正确，防止请求错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue3项目的部署

1.配置路由的 让文件路由和服务器的路径对应起来

在这里插入图片描述
在路由中设置全局的配置
默认

‘/’
path: /login --实际上—> ’ /login’
放到服务器上 就是 http:120.32.62.45/login
想一想 如果你有2个vue项目放到服务器 都是path:/login 那么此时 /login 一定会冲突

base配置后

/wuyu/
path: /login -实际上—> ’ /wuyu/login’
放到服务器上 就是 http:120.32.62.45/wuyu/login
如果你有2个vue项目放到服务器 都是path:/login
项目一就是:path:/login 将会是/vue1存放文件夹/login
项目二就是:path:/login 将会是/vue2存放文件夹/login
不会冲突

2.因为vue3的项目目录 和vue2有这一定的不同

vue3 创建的项目文件目录
在这里插入图片描述
vue2的项目文件

最低0.47元/天 解锁文章
vue-cli3项目打包后自动化部署到服务器的方法
10-14
主要介绍了vue-cli3项目打包后自动化部署到服务器的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
前后端分离 -- SpringBoot + Vue实战项目 部署至阿里云服务器
04-18
本项目用于部署至Linux服务器案例项目 该项目技术栈为：SpringBoot + Spring Security + Vue + ElementUI 前后端分离实现整体项目 一个简单的前后端分离项目
vue 的网站项目发布到阿里云服务器
aystl_gss的博客
09-22 450
vue项目在阿里云服务器上的发布流程
Vue 3 项目部署到服务器的详细指南，涵盖常见场景、问题及解决方案
最新发布
繁若华尘的博客
02-23 720
通过上述步骤和解决方案，可覆盖 Vue 3 部署中的大部分问题。若需更详细的配置示例或特定场景支持，可参考相关来源。
【vue3项目部署到服务器上】
m0_70947033的博客
03-06 842
vue3项目部署到服务器上
vue-cli3部署到阿里云
会一点前端、会一点Java、会一点Python
07-04 2769
最近自己使用vue-cli3框架，仿照起点中文页面，参考网上一些追书神器的api和项目，自己重新做了一个阅读器，顺便打包部署到阿里云。因为是第一次部署到云，所以踩了不少坑，特此记录这个过程，防止以后采坑。 一、购买阿里云服务器 因为我是第一次购买ecs（云服务器），所以有一个低配版免费试用一个月的机会，所以就先不花钱，直接领免费的，因为对配置也不是很在意，将就着用。 二、使用Xshell和X...
「从零开始的 Vue 3 系列」：第十四章——项目部署到服务器流程（简单版）
llfxq的博客
10-16 784
本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。发布步骤：1.使用 Vite 打包生成静态文件。2.选择适合你的发布平台，如 Nginx、Vercel、Netlify 或 Docker。3.配置服务器或平台，上传打包文件，确保正确配置路由和静态资源路径。
使用阿里云服务器以及宝塔部署vue3项目和使用node.js的express项目
2301_77451378的博客
07-06 2615
使用阿里云服务器和宝塔Linux面板部署vue3项目和基于node.js的express项目
【Vue3】项目打包上线部署到服务器
Jessieeeeeee的博客
01-18 2201
1、npm run build打包项目，生成dist文件夹； 2、将dist文件夹复制，粘贴到服务器中；
将vue3项目部署到Linux服务器中（nginx）
m0_59066523的博客
11-09 1603
ADD default.conf /etc/nginx/conf.d/：将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置。COPY dist/ /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下。FROM nginx：该镜像是基于nginx:latest镜像构建的。default.conf内容。
vue3.0项目服务器部署
qq_38766431的博客
02-01 1244
前期准备 在本地安装好vue环境后，编写vue代码，打开cmd，运行以下命令就可以将vue代码打包。 在打包前需要对路径做一个修改，在项目目录下新建一个vue.config.js文件，在文件中写入以下信息 module.exports = { publicPath:'./' }; 保存后，执行以下命令进行打包 cnpm run build 服务器部署 执行完上述命令后，会在当前文件下生成一个dist文件夹。 对nginx的nginx.conf文件做一个配置 进入nginx/sbin
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器 请求不到后台接口解决方法，有需要的朋友们可以参考下。
vue3+node全栈项目部署到云服务器
FHHHC的博客
10-31 926
一、前言　　 　　最近在B站学习了一下全栈开发，使用到的技术栈是Vue+Element+Express+MongoDB，为了让自己学的第一个全栈项目落地，于是想着把该项目部署到阿里云服务器。经过网上一番搜索和自己的一顿操作后，我在这里记录一下自己的部署过程，方便以后查阅。 参考博客： https://segmentfault.com/a/1190000012186563?utm_source=t...
用Nginx将前端Vue项目部署到云服务器（含代理实现请求跨域）
m0_62556296的博客
10-24 3261
记录使用Nginx将的Vue3项目部署到阿里云服务器（Ubuntu 22.04）上，包含通过Nginx代理实现、以及个人踩坑记录~
vueCLI3.0部署到阿里云服务器
宫本武藏獒
10-14 819
vueCLI3.0部署服务器 因工作需要.vue项目部署到服务器上.使用finalShell链接服务器与xshell基本相同.Xftp6来传输文件 vue项目打包 npm run build 此时目录会多出一个dist文件夹.这就是我们打包好的项目. 可以进入dist文件夹,打开里边的index.html文件.但是发现是空白的. 这里提供一个方法可以查看,但只针对CLI3的架子. 在项目所在路径cmd 第一步执行:npm install -g serve 第二步执行:serve -s dist 随后复制
Vue-CLI 3.x 部署项目至生产服务器
weixin_33936401的博客
03-28 729
本教程主要讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 先构建生成dist文件(纯静态应用), 然后自动化部署到静态文件服务器 Nginx。一、Nginx服务器文件的配置server { listen 80; server_name www.xxxxxx.com;#生产环境 location / { root /usr/local/www/x...
vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上
朱豪凯的博客
08-11 4586
介绍vue3中怎么打包，并部署到Nginx服务器上
Vue3项目打包部署到云服务器的Nginx中
分享技术，分享经验
05-12 1560
放到docker安装的nginx中的。推荐使用docker安装nginx，nginx配置文件容易出错！
vue前端项目部署到阿里云服务器
01-13
### Vue 前端项目部署至阿里云服务器教程 #### 打包前端项目 为了准备部署，需先在本地环境中打包Vue项目。通过命令行工具进入项目的根目录并执行构建指令： ```bash npm run build ``` 这一步骤将会创建一个名为`dist`的文件夹，其中包含了用于生产环境的应用程序资源，包括静态资产和入口HTML页面[^3]。 #### 购买与配置阿里云服务器 对于初次使用者而言，可以选择阿里云提供的轻量级应用服务器进行尝试，该服务提供给新用户为期一个月的免费试用期[^2]。访问官方网站注册账号后，按照指引选购适合开发需求的服务实例规格，并完成必要的网络设置如安全组规则开放HTTP/HTTPS端口等操作以便外部能够正常访问网站内容。 #### 文件传输至远程主机 采用SFTP协议或是其他方式上传之前编译好的`dist`目录下的所有文件到已购得的ECS实例内指定位置；如果选用Apache Tomcat作为Java Servlet容器，则应将其放置于`webapps`路径之下。 #### 启动Web服务进程 确保目标机器上已经安装好Node.js运行时环境或者是相应的Java JRE/JDK版本之后启动Nginx/Apache HTTP Server/Tomcat等中间件来托管这些静态网页文档。针对不同类型的Web服务器可能还需要额外调整一些参数选项以优化性能表现或满足特定业务逻辑的要求。 #### 测试验证成果 最后，在浏览器地址栏输入分配给当前虚拟机公网IP对应的URL链接查看是否能顺利加载出预期界面效果从而确认整个流程无误结束。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值