云服务器Ubuntu部署vue项目

我使用的是vscode

  1. CTRL + ~ 快捷键打开终端
  2. 终端输入: npm run build

没有任何报错,看到下面你就成功

在左边目录你将会看到dist包

本地dist传到云服务器

推荐使用winscp,直接拖过去

winscp连接云服务器上传本地文件-CSDN博客

dist可以放在任何自定义目录,比如:

自定义一个目录,dist存在proname_front目录下
后面以这个路径为例
cd /
mkdir projects
cd projects
mkdir proname_front

xshell远程操作云服务器

xshell7连接云服务器操作-CSDN博客

配置nginx

如果你是第一次,完全可以用完的命令,后面你懂了再自定义

我的目标是配置上面的那个vue项目

新建myweb.conf

进入配置目录
cd  /etc/nginx/sites-enabled
新建一个myweb.conf配置文件
sudo touch myweb.conf

myweb.conf里配置项目

打开文件
vim myweb.conf
启用编辑模式(就是按一个建:i)
i
复制下面的server代码块,根据自己的需要修改
server {
   listen 80; # 设置服务器监听的端口号为80,默认端口,其他端口就要加上default_server
   root /projects/proname_front/dist; # 设置服务器的根目录为指定路径下的前端文件存放地址
   index index.html;  # 设置默认索引文件为index.html
   server_name your_ip;  # 设置服务器的域名或IP地址,用于匹配请求的主机头部
   location / {
       # 当请求的 URI 匹配当前位置(即根目录)时,如果找不到则重定向到index.html
       try_files $uri $uri/ /index.html;
   }
}


保存退出
按ESC,然后:wq

启动

检查有没有配置语法错误
sudo nginx -t 
重启nginx,激活新配置
sudo systemctl reload nginx

检验

总结

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

前端面试题汇总

JavaScript

性能

linux

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,确保你已经在Ubuntu上安装了Nginx和Node.js。可以使用以下命令来安装它们: 1. 安装Nginx: ``` sudo apt update sudo apt install nginx ``` 2. 安装Node.js: ``` curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - sudo apt install -y nodejs ``` 接下来,你可以按照以下步骤来部署Vue项目: 1. 在你的Ubuntu服务器上,创建一个新的目录用于存放你的Vue项目文件。 2. 进入该目录并使用以下命令来创建一个新的Vue项目: ``` npx @vue/cli create my-vue-app ``` 3. 进入新创建的项目目录: ``` cd my-vue-app ``` 4. 使用以下命令将Vue项目构建为静态文件: ``` npm run build ``` 5. 构建完成后,将生成的静态文件复制到Nginx的默认网站目录中: ``` sudo cp -R dist/* /var/www/html/ ``` 6. 配置Nginx以服务于Vue项目。编辑Nginx的默认网站配置文件: ``` sudo nano /etc/nginx/sites-available/default ``` 7. 在该文件中,找到`root`指令并将其值更改为Vue项目的路径,例如: ``` root /var/www/html; ``` 8. 在同一文件中,找到`index`指令并添加`index.html`,例如: ``` index index.html; ``` 9. 保存并关闭文件。 10. 重新加载Nginx配置以使更改生效: ``` sudo service nginx reload ``` 11. 现在,你可以通过服务器的IP地址或域名来访问部署好的Vue项目。 希望以上步骤能帮助你成功部署Vue项目Ubuntu上的Nginx服务器。如果有任何问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值