Ubuntu服务器上部署Vue项目

2024-05-14 03:05:26

一、创建Vue项目

用管理员权限打开命令行窗口，用vue-cli 来新建一个项目，执行->vue create [项目名称],我这里项目名称为testapp,回车命令行之后会有这么一个弹窗让你选择是默认安装依赖还是手动安装，可根据自己项目需要按上下键选择；安装完成之后，cd到testapp项目目录下，执行->npm run serve 运行项目，打开浏览器http://localhost:8080/，就能看见新项目的首页，在编辑器中编辑项目内容之后，执行->npm run build ，对项目进行编译打包。

二、Ubuntu上安装配置nginx

打开Ubuntu 命令窗口

第一步：安装ngix

https://www.cnblogs.com/aaronthon/p/9945993.html

第二步：启动nginx

root@celine: sudo /etc/init.d/nginx start

第三步：查看进程

root@celine: ps -ef|grep nginx

有进程编号则表示成功启动。

第四步：更改配置

root@celine: cd /etc/nginx/sites-enabled

root@celine:/etc/nginx/sites-enabled# vim default

修改root 指定的vue项目存放路径，以及try_files 后面为index.html，nginx配置结束。

第五步、重启nginx。

三、Vue项目部署

进入vue项目testapp目录下找到打包文件夹dist,将dist目录下的所有文件压缩之后上传到nginx root 指定的目录下。

打开本地浏览器输入虚拟机ip地址即可访问vue项目。

Ubuntu服务器上部署Vue项目相关推荐

在nginx上部署vue项目(history模式)；
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
在nginx上部署vue项目(history模式)--demo实列；
转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇关于在nginx上部署vue项目(history模式) 但是 ...
在云服务器上部署的项目一直运可以怎么做
之前在阿里云上部署的一个项目,但是每次访问都需要ssh访问远程服务器, 运行项目才能够访问.于是网上查了一些资料, 但是并没有找到我想要的结果,但是最后我还是找到了我想要的答案.是在阿里云的帮助文档上 ...
关于Linux服务器上部署tomcat项目，输入数据乱码解决
在linux上部署java项目时一定不要忘记在数据库连接字段中加上 ?characterEncoding=utf-8 这个在windows上本地的mysql配置的utf-8可以不需要添加,但是在lin ...
基于nginx和uWSGI在Ubuntu系统上部署Django项目
1. nginx 1.1 安装 sudo apt-get install nginx 1.2启动.停止和重启 sudo /etc/init.d/nginx start sudo /etc/init.d ...
Ubuntu服务器上部署kodexplorer私有云盘
阅读目录一.准备二.下载安装xampp 三.下载安装可道云kodexplorer 注意:云服务器部署和普通的Ubuntu上部署有一些区别,因为云服务器上只能使用命令行,没有界面. 一.准备首先, ...
node配置ssl证书_在Linux服务器上部署node项目（git部署，forever持续运行，配置SSL证书）...
一.环境部署 1.下载安装包: wget https://nodejs.org/dist/v9.9.0/node-v9.9.0-linux-x64.tar.xz 2.解压并进入目录: xz -d no ...
沃云服务器上部署web项目（亲试）！
昨天帮一个同学在沃云上部署了一个项目,今天特此记录下: 难点共有以下: 宝塔助手使用+数据库部署到云端+tomcat安装本地项目上传+开放端口一.宝塔助手教程https://blog.csdn.ne ...
如何在云服务器上部署web项目（CVM）
在QQ空间中发现了腾讯云的域名1元/年的活动,之前只试过在Windows下用XAMPP部署静态页面以及在Centos中用LNMP部署静态页面,好奇在云主机上部署静态页面.web项目会有什么不同,便点进 ...

最新文章

热门文章