vue linux部署,linux运行vue项目
本文介绍了在Linux服务器上部署vue项目的方法，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
案例一
vue-cli构建vue3项目，将项目上传到Linux服务器，在服务器中安装节点，并启动vue项目。
首先本地有一个vue项目，启动后可正常访问
本地打包后，也可直接访问
若打包后的index.html页面显示空白，需在项目的根路径下新建vue.config.js，再重新打包，参考
Linux服务器安装nodejs，参考
#下载节点压缩包，命令执行时会下载到哪个路径。
wget https://NPM . Taobao . org/mirrors/node/v 12 . 16 . 1/node-v 12 . 16 . 1-Linux-x64 . tar . gz
#将压缩包剪切到/usr/local/bin/path中，并解压。
塔尔-xvf node-v12.16.1-linux-x64.tar.gz
#将文件夹名称修改为NodeJs
mv节点-v12.16.1-linux-x64节点
#安装gcc
yum安装gcc gcc-c
#在/usr/local/bin/NodeJs/bin路径中有三个文件：node npm npx
#为这三个文件设置软连接，/usr/bin目录用于存储系统命令。此时会在任意路径下执行：node相当于执行/usr/local/bin/NodeJs/bin/node路径下的文件，执行完node你就进入了节点环境。
ln-s/usr/local/bin/NodeJs/bin/node/usr/bin/node
ln-s/usr/local/bin/NodeJs/bin/NPM/usr/bin/NPM
ln-s/usr/local/bin/NodeJs/bin/npx/usr/bin/npx
#输入根目录
激光唱片
#验证
结节
将vue项目上传到Linux服务器，编译运行
#输入vue项目的根目录
cd /home/web
#安装依赖项
npm安装
#编译和打包
npm运行构建
#开始项目
npm运行服务
测试
错误总结
在Linux服务器上编译项目时报错如下，说明node版本过低，参考
在Linux服务器上编译项目时报错如下，说明node版本17.1.0过高
解决方案，参考
#如果之前使用yum安装节点，则需要卸载并重新安装。安装步骤请参考本博客中使用“源码包”的方法进行安装。
#卸载节点
yum删除节点npm -y
#转到/usr/local/lib并删除所有node和node_modules文件夹
#转到/usr/local/include并删除所有节点和node_modules文件夹
#转到/usr/local/bin删除节点的可执行文件
若编译、启动项目时报错权限不足
解决办法
#将指定文件设置权限。
chmod 777 /home/web/xxx
运行项目时报错：warnings potentially fixable with the --fix option
解决方案，将项目中package.json中的 lint: vue-cli-service lint 修改为：eslint-fix-ext.js， vuesrc。
涉及
案例二
vue-cli构建vue3项目，将其打包，并将dist文件放在tomcat上。
Linux服务器安装tomcat
#用docker拉出tomcat容器
码头工人拉雄猫
#后台启动
docker run -d -p 8080:8080 tomcat
#启动后浏览器访问http://192.168.0.102:8080/返回404。
#解决方案：
#对外开放8080端口
firewall-cmd-zone=public-add-port=8080/TCP-permanent
#重新启动防火墙以生效
防火墙-命令-重新加载
#输入tomcat容器
dockexec-它正在运行容器id /bin/bash
#将webapps.dist目录中的所有文件复制到webapps路径
CP-r webapps.dist/*。/webapps
#删除webapps.dist目录
rm -rf webapps.dist
#此时可以通过浏览器访问tomcat页面，但是重启后tomcat镜像仍然是404，需要将当前修改的容器作为新镜像提交。
#不停止容器就退出
ctrl p q
#在容器运行时提交自定义容器。tomcat10:10.1是我的自定义映像名称和版本号。
docker commit-a= author -m= remarks 运行容器id tomcat10:10.1
#停止当前的tomcat容器
停靠站正在运行的容器的Id
#删除容器。
docker rm运行后的集装箱id
#启动自己提交的镜像。
docker run-d-p 8080:8080 Tomcat 10:10.1
#补充
#启动tomcat映像时出错：驱动程序无法对端点query _ Allen上的外部连接进行编程
#错误原因：之前启动后端项目时8080端口被占用，需要结束后端项目。
#测试，访问http://192.168.0.102:8080，看到tomcat页面，说明启动成功。
将打包后的项目放到tomcat容器
#创建共享文件夹
mkdir-p/home/my docker/my Tomcat 8080/data
#开始容器8080:
码头运行\
-p 8080:8080 \
-命名我的-tomcat8080 \
-v/home/my docker/my Tomcat 8080/data:/usr/local/Tomcat/web apps \
-d \
tomcat10:10.1
#启动容器时出错：docker:引用格式无效。
#错误原因：docker命令编写不正确。我在这里-v/home/mydoker/mytomcat 8080/data:/usr/local/Tomcat/web apps \冒号后面多了一个空格。
#进入vue项目的根目录，打包后生成dist文件夹。这里，我们仍然使用案例一中的项目。
npm安装
npm运行构建
#将打包的文件复制到tomcat
mv dist/home/my docker/my Tomcat 8080/data
#重新启动tomcat容器
Dockrestart Tomcat容器id
#测试，本地访问http://192.168.0.102:8080/dist/
这就是这篇关于在Linux服务器上部署vue项目的文章。希望对大家的学习有帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。