案例一
| |
| wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz |
| |
| tar -xvf node-v12.16.1-linux-x64.tar.gz |
| |
| mv node-v12.16.1-linux-x64 NodeJs |
| |
| yum install gcc gcc-c++ |
| |
| |
| 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 |
| |
| cd |
| |
| node |
| |

| |
| cd /home/web |
| |
| npm install |
| |
| npm run build |
| |
| npm run serve |
| |

- 测试

错误总结
- 在Linux服务器上编译项目时报错如下,说明node版本过低,参考

- 在Linux服务器上编译项目时报错如下,说明node版本17.1.0过高

- 解决方案,参考
| # 若之前使用yum安装的node,需卸载后重新安装,安装步骤参考本篇博客中使用`源码包`的方法安装 |
| # 卸载nodejs |
| yum remove nodejs npm -y |
| # 进入 /usr/local/lib 删除所有 node 和 node_modules文件夹 |
| # 进入 /usr/local/include 删除所有 node 和 node_modules 文件夹 |
| # 进入 /usr/local/bin 删除 node 的可执行文件 |
| |
- 若编译、启动项目时报错
权限不足

- 解决方案
- 运行项目时报错:warnings potentially fixable with the
--fix
option
- 解决方案,将项目中package.json中"lint": "vue-cli-service lint" 修改为:eslint --fix --ext .js,.vue src

- 参考
案例二
vue-cli构建vue3项目,打包后将dist文件放到tomcat上
- Linux服务器安装tomcat
| |
| docker pull tomcat |
| |
| docker run -d -p 8080:8080 tomcat |
| |
| |
| |
| firewall-cmd --zone=public --add-port=8080/tcp --permanent |
| |
| firewall-cmd --reload |
| |
| docker exec -it 正在运行的容器id /bin/bash |
| |
| cp -r webapps.dist/* ./webapps |
| |
| rm -rf webapps.dist |
| |
| |
| ctrl + p + q |
| |
| docker commit -a="作者" -m="备注" 正在运行的容器id tomcat10:10.1 |
| |
| docker stop 正在运行的容器id |
| |
| docker rm 运行后的容器id |
| |
| docker run -d -p 8080:8080 tomcat10:10.1 |
| |
| |
| |
| |
| |
| |
| |
| |
| mkdir -p /home/mydocker/mytomcat8080/data |
| |
| docker run \ |
| -p 8080:8080 \ |
| --name my-tomcat8080 \ |
| -v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \ |
| -d \ |
| tomcat10:10.1 |
| |
| |
| |
| |
| |
| npm install |
| npm run bulid |
| |
| mv dist /home/mydocker/mytomcat8080/data |
| |
| docker restart tomcat容器id |
| |
| |
| |


案例三
使用nginx动静分离的特性,转发到vue项目打包后的dist/index.html
- docker安装nginx,参考
| |
| docker pull nginx |
| |
| docker run --name my-nginx -p 80:80 -d nginx |
| |
| mkdir -p /home/mydocker/mynginx/conf/conf.d |
| mkdir -p /home/mydocker/mynginx/html |
| mkdir -p /home/mydocker/mynginx/logs |
| |
| docker cp 正在运行的容器id:/etc/nginx/nginx.conf /home/mydocker/mynginx/conf |
| docker cp 正在运行的容器id:/etc/nginx/conf.d /home/mydocker/mynginx/conf |
| docker cp 正在运行的容器id:/usr/share/nginx/html /home/mydocker/mynginx |
| |
| docker stop 容器id |
| docker rm 容器id |
| |
| docker run -p 80:80 --name my-nginx --restart=always -v /home/mydocker/mynginx/conf/nginx.conf:/etc/nginx/nginx.conf -v |
| /home/mydocker/mynginx/conf/conf.d:/etc/nginx/conf.d -v /home/mydocker/mynginx/html:/usr/share/nginx/html -v /home/mydocker/mynginx/logs:/var/log/nginx -d nginx |
| |
| |
- 配置default.conf

- 根据以上配置信息,我们需要将vue项目打包后,生成的dist文件夹里的文件复制到如下路径

- 浏览器测试是否部署成功

补充
- 部署原理:vue项目打包后生成的dist文件夹其实就可以直接访问了,nginx只是将请求转发到Linux服务器的静态文件
- 查看nginx配置文件:上面的localhost:80表示nginx的地址,如果nginx在一台服务器上,可通过
http://服务器ip:80
访问到nginx
- 下面的
root
则表示访问nginx时,会转发到该路径下的index.html页面,也就是说我们可以随意转发到Linux服务器的静态文件

- 而我最开始配置转发路径后却没有找到,下面进行错误还原
- 首先我有一个vue项目,编译打包后是如下路径

- 再配置一下nginx,最开始一看是没有问题的

- 重启nginx后测试,没有找到指定的文件

错误原因:这是因为我启动的nginx是一个容器,这个容器跑在docker上,就算指定了静态文件路径,它也不能访问到宿主机上的文件的
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)