当前位置: 首页 > Web前端 > vue.js

Centos7下Vue.js项目部署文档

时间:2023-04-01 01:29:56 vue.js

1.nodepm2环境配置1.使用服务器下载nodejs//如果没有安装wget,安装yuminstallwgetsudoyum-yupdateVersionsudowgethttps://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz2.nodenpm环境配置最好不要安装在/root目录下,因为普通用户没有/root目录访问权限,进而无法执行安装在/root目录下的软件,可以将node文件夹复制到其他路径,如:/usr/local/node等,然后进行后续操作mvnode-v8.12.0-linux-x64.tar.xz/usr/local//解压到当前目录tar-xvfnode-v8.12.0-linux-x64.tar.xz//更改目录名mvnode-v8.12.0-linux-x64nodejs//创建链接ln-s/usr/local/nodejs/bin/node/usr/local/bin/nodeln-s/usr/local/nodejs/bin/npm/usr/local/bin/npm3.运行node-v、npm-v查看版本,如果正确则nodenpm环境正确4.全局安装pm2npminstallpm2-g5。创建一个pm2链接sudoln-s/usr/local/nodejs/lib/node_modules/pm2/usr/local/bin/pm22.项目打包在vue项目中使用npmrunbuild命令打包生成管理目录(默认为dist目录,可修改)。这个文件夹就是我们要部署上线的项目。3.编写节点启动脚本。主要是读取目录下的单页文件(index.js),监听8002端口。constfs=require('fs');constpath=require('path');constexpress=require('express');constapp=express();app.use(express.static(path.resolve(__dirname),'./manage')))app.get('*',function(req,res){consthtml=fs.readFileSync(path.resolve(__dirname,'./manage/index.html'),'utf-8')res.send(html)})app.listen(8002);4、生成package.json文件由于app.js启动脚本使用了express框架,我们可以生成一个package.json文件,将express依赖添加进去。{"name":"back_manage","version":"1.0.0","description":"","main":"app.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"author":"","license":"ISC","dependencies":{"express":"^4.15.3"}}5.服务器上传文件新建文件夹,上传vue项目包文件,app.js启动脚本,和package.json配置文件到这个文件夹。注意:三个文件在同一层级。这个文件夹下的安装依赖npminstall六、启动服务登录你的服务器,cd到项目文件夹,使用pm2startapp.js成功启动pm2的其他一些命令的服务pm2show0(id)//查看某个已启动应用的详细信息pm2showlist//查看所有当前已启动的应用pm2stop0(id)//关闭某个应用VII.其他事项1、端口开放:如上,单页应用监听8002端口,需要开放8002端口,可能涉及到iptables、防火墙、阿里云安全组等,具体方法已经详细介绍在另一个部署文档中,这里不再赘述。2、做完以上操作,理论上可以通过ip+端口在浏览器中查看项目页面,但实际上第一次访问时界面如下:页面空白,无法获取资源成立。然后百度找到原因并修改。一处:修改assetsPublicPath在config/index.js中,有个assetsPublicPath属性,源码是'/',改成'./',加点assetsPublicPath:'/',改成assetsPublicPath:'./',项目重新打包。