Vue项目部署到服务器（ubuntu）

已于 2022-05-27 20:38:41 修改
阅读量3.8k 收藏 12
点赞数 3
分类专栏： 云服务器 前端 文章标签： vue
于 2021-03-12 16:02:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44532671/article/details/114665534
版权
本文介绍了如何将Vue项目部署到Ubuntu服务器，包括本地编译Vue项目，通过VSCode终端运行编译命令，生成dist文件夹，然后上传到服务器。接着在服务器上安装nginx，新建并配置项目文件，详细讲解了配置文件的结构和管理方式。最后，通过重启nginx服务，测试前端项目在Ubuntu和外部设备上的访问情况，完成部署过程。
摘要由CSDN通过智能技术生成

本地编译

查看项目README.md文件，找到编译命令
在这里插入图片描述

打开vscode，右击项目，Open in Integrated Terminal，输入以下代码回车运行。

npm run build

在这里插入图片描述
把生成的dist文件夹上传到服务器上，我放到了mss/mss_admin/dist里。

服务器安装nginx

下载nginx并安装。

sudo apt-get install nginx

新建项目的配置文件
首先确定配置文件的位置whereis nginx

ubuntu@VM-12-4-ubuntu:~$ whereis nginx
nginx:
 /usr/sbin/nginx    #主程序
 /usr/lib/nginx #软件的函数库
 /etc/nginx  #存放配置文件
 /usr/share/nginx  #存放静态文件
 /usr/share/man/man8/nginx.8.gz  #联机帮助文件

配置文件的介绍可以看

最低0.47元/天 解锁文章
洛阳八中我最棒
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Ubuntu部署java项目和vue项目，超通俗解析
m0_60732644的博客
04-06 560
工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**
基于 vue-cli 2 实现，window环境下支持项目一键部署到 Ubuntu 服务器
03-01
基于 vue-cli 2 实现，window环境下支持项目一键部署到 Ubuntu 服务器。支持生成 zip 包 简化代理配置。支持本地测试访问生产包。基于 WinSCP 脚本支持一键部署
Vue系列第一篇：Ubuntu下搭建Vue开发环境，开发第一个程序并部署
hsy12342611的专栏
07-17 2526
Ubuntu下搭建Vue开发环境，开发第一个程序并部署
ubuntu22部署 vue 和 springboot项目
最新发布
qq_42152032的博客
05-24 526
1.使用命令npm run build:prod（构建生产环境）进行打包，打包成功后，会在项目下看到dist文件夹ps:也有可能是npm run build命令进行打包(具体看package.json中"build": "vue-cli-service build"的key是什么)2.将dist文件夹上传到服务器指定目录, 我选择的目录是/www/server/3.安装配置nginx# 添加 Nginx 源# 安装 Nginx# 启动 Nginx# 设置开机自启 Nginx。
Vue+ElementUI项目打包部署到Ubuntu服务器中
番茄Salad
10-26 1119
【代码】Vue+ElementUI项目打包部署到Ubuntu服务器中。
ubuntu下vue项目构建工具安装小笔记
qq_42018705的博客
04-09 1423
1、克隆到本地：git clone https://gitee.com/mirrors/nvm 本地地址。下载包过慢时，可能需要切换到第三方源（例如：淘宝、科大...），还有公司私有源地址等等。# 安装过程中，因为国外服务器的原因，所以如果失败就执行多几次吧。第四，选择路由Router的路由模式，问我们是否使用历史状态管理模型，就是路由没有。安装过程因为需要联网，所以如果出现网络安装失败，则重新安装多次。第二，选择项目依赖文件。第七，EsLint和Babel的配置是否保存一块，选择第二个选项。
在ubuntu上使用docker部署vue项目
weixin_45326523的博客
07-06 233
把dist、Dockerfile、default.conf文件都放在/home/docker/ui/ 路径下；复制dist文件到服务器一个空目录下：我的复制到了 /home/docker/ui 路径包下了；构建镜像和使用docker部署后端一样，由于使用的都是docker部署，所以会很方便！build后在项目存放路径中会有个dist文件；服务器公网ip:8888。
JAVA前后端分离项目部署笔记.docx
05-17
JAVA前后端分离项目部署笔记 本文档记录了JAVA前后端分离项目的部署笔记，涵盖了虚拟机安装、Node.js和Vue.js安装、Nginx安装、Mysql安装、Redis安装、JDK安装和Maven安装等多个方面的知识点。 1. 虚拟机安装与...
详解Ubuntu环境下部署Django+uwsgi+nginx总结
09-17
要将项目上传到服务器，通常使用git进行版本控制，通过以下步骤： 1. 初始化git仓库：`git init` 2. 添加远程仓库：`git remote add origin xxx.git`（替换为你的项目git地址） 3. 添加所有文件：`git add .` 4. ...
解决vue打包项目后刷新404的问题
08-27
然而，当Vue项目被打包后，用户在浏览器中直接访问或刷新非根路由（如`/about`或`/contact`）时，可能会遇到404 Not Found错误。这是因为浏览器向服务器请求的是特定的路径，而服务器无法找到对应的静态资源。为了...
ubuntu安装vue
佳佳鸽的博客
01-10 4098
ubuntu安装VUE3
Django个人博客搭建教程—使用Ubuntu+Nginx部署你的Vue应用
01-09
/etc/nginx/nginx.conf添加这一段 server { listen 8090; server_name www.guanacossj.com; index index.html; root /home/MyBlog/myblogfront/dist; location / { try_files $uri $uri/ /index.html; } } root表示vue项目build后生成的dist目录，里面有static和index.html两个文件 在vue工程下，我这里是myb
ubuntu通过nginx发布vue线上项目
阿啵呲嘚的博客
03-23 1402
ubuntu通过nginx发布vue线上项目 一：安装nginx 1：运行以下命令 sudo apt-get install nginx 2：安装完之后查看是否安装成功 nginx -v // 查看版本 nginx -t // 查看配置文件是否成功 配置成功会显示： nginx: the configuration file /xxx/xxx/nginx.conf syntax is ok nginx: configuration file /xxx/xxx/nginx.conf test is succ
在Ubuntu下部署Vue开发环境(详细流程)
魏泯
12-26 2180
在Ubuntu下部署Vue环境(非常详细流程) 我们的目的是为了能够使用npm run dev将我们的前端项目运行起来 我们需要的是nodejs、npm、cnpm、webpack、vue 在Ubuntu下下载安装nodejs 更新包管理器apt与apt-get sudo apt update sudo apt-get update 使用apt包管理器进行下载 sudo apt-get insta...
ubuntu系统下vue前端开发环境搭建
weixin_43880896的博客
03-02 891
安装环境 安装nodejs 1、安装nodejs sudo gpt-get install nodejs 2、测试安装结果 node -v 或 node --version 2、安装npm 1、安装npm sudo apt-get install npm 2、测试安装结果 npm -v 或 npm --version 3、安装cnpm 1、安装cnpm，-g是全局安装 sudo npm install -g cnpm 2、如果慢，可以使用taobao的源 sudo np
ubuntu下vue.js环境搭建初始化项目
孟林洁的博客
08-13 5273
ubuntu 下 vue.js环境搭建及初始化项目
ubuntu创建vue项目
飞鸿的博客
07-23 1676
ctrl+alt+t打开终端 下载node.js，网址：https://nodejs.org/en/ 把 nodejs安装完成后，npm自带的。 一、创建新vue项目 创建一个文件夹（test是我自己的文件夹） mkdir test   进入文件夹 cd test   安装和下载全局vue-cli（因为我之前安装好了，所以不需要再次安装）(此...
Ubuntu Vue 前后端分离项目的启动部署
ccr1001ccr1001的博客
04-04 944
1. 安装node.js与npm sudo apt-get install nodej sudo apt-get install npm 检查nodejs和npm版本 nodejs -v npm -v 版本过低，直接下载源码二进制文件或者源码安装：下载地址：https://nodejs.org/en/download/current/ wget wget https:/...
linux（Ubuntu）搭建Vue开发环境
rongqwe的博客
12-30 4946
一 环境准备 1.更新软件源软件列表 命令行输入 sudo apt update 2.安装nodejs 命令行输入 sudo apt install nodejs 有提示就输入yes就好 然后命令行查看nodejs版本号，顺便测试nodejs是否正确安装 nodejs -v 二 安装npm和cnpm 1.npm安装 命令行输入 sudo apt install npm 安装好后输入 npm -v 查看是否安装成和当前版本号 2.cnpm安装 由于npm很慢，所以还需要安装cnpm。 使用np
将前端vue项目部署到nginx服务器
06-07
好的，让我来给你介绍一下将前端Vue项目部署到Nginx服务器的具体步骤： 1. 首先，需要先将Vue项目打包，使用命令`npm run build`来构建项目。 2. 然后，在项目目录下，会生成一个dist目录，里面包含了所有需要部署的文件。 3. 接下来，安装Nginx服务器，如果你已经安装过了可以跳过这一步。在Ubuntu系统中，可以使用以下命令安装： ``` sudo apt-get update sudo apt-get install nginx ``` 4. 部署Vue项目文件。将dist目录中的所有文件复制到Nginx的静态文件目录中，通常是`/var/www/html`，可以使用以下命令： ``` sudo cp -r dist/* /var/www/html/ ``` 5. 配置Nginx服务器。打开Nginx的默认配置文件`/etc/nginx/sites-available/default`，并将其中的内容替换为以下内容： ``` server { listen 80; listen [::]:80; root /var/www/html; index index.html; server_name yourdomain.com; location / { try_files $uri $uri/ /index.html; } } ``` 其中，将`yourdomain.com`替换为你的域名。如果没有域名，可以使用服务器IP地址。 6. 保存并退出配置文件，然后重启Nginx服务器： ``` sudo systemctl restart nginx ``` 现在，你的Vue项目已经成功部署到Nginx服务器了。你可以通过浏览器访问你的域名或者服务器IP地址，查看部署效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洛阳八中我最棒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值