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

VIP文章 已于 2022-03-23 15:40:43 修改
阅读量2.2k 收藏 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项目的部署

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的项目文件
在这里插入图片描述

通过比较可以发现
你找不到webpack的一些配置了 也就

最低0.47元/天 解锁文章
门前大桥下.
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目部署到服务器上
web18536560468的博客
09-10 1万+
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
前后端分离 -- SpringBoot + Vue实战项目 部署至阿里云服务器
04-18
本项目用于部署至Linux服务器案例项目 该项目技术栈为：SpringBoot + Spring Security + Vue + ElementUI 前后端分离实现整体项目 一个简单的前后端分离项目
（一）ThreeJS本地环境搭建
轮回的秋
11-14 2073
threeJS API、编辑器、示例代码部署在外网节点，访问不稳定。
【three.js】简介和本地部署
蜗牛~~
10-08 4169
实现企业网站三维呈现，让企业形象更直观、更立体地展现给客户，打破传统平面展示模式，打造智慧、个性、创新的企业形象。因此我们可以访问b站大佬在国内搭建好的本地three.js官网，大家访问如下链接即可，当然也可以自己搭建，下面有讲解。什么是点、线、面、几何体、材质、物体、场景、相机、渲染器、动画、控制器等基础概念，搞定一个最基础的场景和3d物体的显示。接着3d渲染要真实性，肯定离不开PBR，详细了解什么是PBR，PBR基于物理的光照原理的渲染,。由于访问three.js官网是国外的网站，非常慢。
如何将前后分离的项目部署到云服务器
最新发布
qq_51985869的博客
03-12 1181
云服务器操作系统分为Windows和Linux类，Linux系统相对于win占用更少系统资源，一般选用Linux阿里云Linux镜像可选Aliyun Linux、CentOS、Ubuntu、Debian、SUSE Linux、OpenSUSE、CoreOS和FreeBSD。Aliyun Linux是阿里云原生Linux操作系统，针对ECS做了大量深度优化，完全兼容CentOS生态和操作方式；Ubuntu基于Debian，新手更容易上手，时长占有率也高。综上，阿里云ECS云服务器Linux镜像。
Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)
Etc.End的博客
03-26 1万+
这里因为我们有的小伙伴可能不太需要服务器，单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上，有很多方式，自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的，我这里使用的虚拟机+centos系统，我已经提前在自己的机器安装好了。感兴趣的小伙伴可以看我专栏。里面有从虚拟机、centos到一些开发工具的详细安装步骤。特别是我们这篇文章中要用到的nginx服务器。
【vue3项目部署到服务器上】
m0_70947033的博客
03-06 687
vue3项目部署到服务器上
用Nginx将前端Vue项目部署到云服务器（含代理实现请求跨域）
m0_62556296的博客
10-24 1839
记录使用Nginx将的Vue3项目部署到阿里云服务器（Ubuntu 22.04）上，包含通过Nginx代理实现、以及个人踩坑记录~
手把手教你如何把vue项目打包后部署到服务器（小白教程）
热门推荐
Orange71234的博客
06-21 1万+
（5）输入用户名密码登录出现如下页面 ，点击左侧网站-->添加站点-->输入域名-->根目录地址会 自动生成-->点击提交-->站点创建成功。1.vscode打开你的vue项目-- >点终端 -- >输入npm run build 按回车进行打包；3.下载安装好软件后双击打开，选择SSH连接，填写如下信息，最后点击确定。（7）点击上传，按照下图方式上传之前打包好的dist文件夹下的内容，(2)查看服务器是否安装宝塔，如安装则出现宝塔面板命令，(3)输入14，查看并复制外网面板地址以及用户名，密码。
【前端vue3项目部署】操作步骤
无邪的博客
10-05 311
视频源链接： https://www.bilibili.com/video/BV1YE411E7Xr/?
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
最近部署一个Vue项目到阿里云ECS上，因为项目涉及一些跨域请求，所以采用了Nginx代理请求本地的node服务（利用pm2做进程管理）。node服务借助axios设置headers的referer、host转发请求，解决跨域请求问题。 先交代下...
(新手向)从零开始将springboot项目部署到云服务器（ecs）上
01-09
最近用springboot写了一个个人博客项目，正好之前趁着活动免费领取了一个阿里云的云服务器ecs，于是准备把项目部署到服务器上。对于我这种纯新手来说，部署过程可谓是踩坑无数,好在最后还是成功了。  这里跟大家...
Vue.js项目部署到服务器的详细步骤
12-12
我这里找基友拿的一个，做测试的话，可以买阿里云的学生机，9.9 一个月，不过不是学生的话就比较麻烦，因为涉及敏感操作都需要验证码。 编译打包 将项目打包成 dist 文件，这里我需要跨域请求一些数据，还写了一个...
基于springboot智能外卖小程序+后台管理端系统(已部署至阿里云服务器) .zip
11-21
基于springboot智能外卖小程序+后台管理端系统(已部署至阿里云服务器) .zip 毕业设计 基于springboot mysql Vue的系统开发，供参考，提供说明材料+源代码 毕业设计 基于springboot mysql Vue的系统开发，供参考，...
Vue3学习(四)服务器部署
m0_64393446的博客
06-26 555
指令 cd /usr/local/nginx-1.24.0/sbin。运行 npm run build 即可打包。在 public文件夹新建config.json。修改package.json。main.js 里使用axios读取配置。Java后台启动脚本 start.sh。如果想打包Vue工程，需要修改打包配置。SpringBoot 打包。
vue3项目打包到上线到云服务器遇到的种种问题
u012147066的博客
02-19 1421
最近刚写完自己的第一个项目，过程中就有蛮多想写的，但没想到打包上线等收尾工作最让我头大，所以就先写这些了(项目过程中遇到的问题有时间也会发的)，菜鸟，很多概念都不是很清晰，但因为自己在遇到问题的时候很希望能找到一篇详尽的文章，所以有了这篇，希望能帮到你。
nginx+vite+Vue3 项目打包及部署到服务器二级路由
az051500的博客
06-06 1444
不用配置环境变量，vite.config.ts不用配置。在vite当中，官方提供了一些内置环境变量，其中就包括。例如：我希望将打包的项目部署到。的方式调用环境变量，此处为。，在项目文件中，必须通过。，之后，vite会将。
【前后端分离项目部署】关于“vue3+SpringBoot+阿里云服务器+宝塔操作”的打包部署全流程配置
m0_60935824的博客
10-19 1269
npm run 命令dist。
将vue3项目部署到Linux服务器中（nginx）
m0_59066523的博客
11-09 735
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内容。
vue项目部署到阿里云服务器上 使用linux
05-14
部署 Vue 项目到阿里云服务器可以分为以下几个步骤： 1. 安装 Node.js 和 npm 在 Linux 系统上安装 Node.js 和 npm 可以使用包管理器来安装，例如在 Ubuntu 系统上可以使用以下命令来安装： ``` sudo apt-get update sudo apt-get install nodejs sudo apt-get install npm ``` 2. 安装 Vue CLI 使用 npm 安装 Vue CLI： ``` npm install -g @vue/cli ``` 3. 构建 Vue 项目 在项目根目录下执行以下命令构建项目： ``` npm run build ``` 将会在项目根目录下生成一个 `dist` 目录，里面包含了构建好的静态文件。 4. 配置 Nginx 安装 Nginx： ``` sudo apt-get install nginx ``` 创建一个新的 Nginx 配置文件 `/etc/nginx/sites-available/vue-app`，内容如下： ``` server { listen 80; server_name yourdomain.com; root /var/www/vue-app/dist; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 将 `yourdomain.com` 替换为你的域名或者 IP 地址。 启用刚创建的 Nginx 配置文件： ``` sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/ ``` 重启 Nginx： ``` sudo service nginx restart ``` 现在你可以通过浏览器访问你的 Vue 应用了。 注意：如果你的服务器开启了防火墙，需要打开 80 端口或者使用 HTTPS 协议来访问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值