vue-cli4 部署到服务器与渲染（坑超级多写了我的经验）

最新推荐文章于 2025-03-05 18:44:07 发布

萨拉伊丁

最新推荐文章于 2025-03-05 18:44:07 发布

阅读量1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_40895460/article/details/109500212

版权

我先买了腾讯云的三个月的学生轻量级服务器，选了centOs系统

1.首先需要配置服务器，给服务器设置密码

2.下一步我做的就是打包自己的vue-cli项目

npm run build

3.在当前目录下vue会给你生成一个名字叫dist的文件，把他压缩成tar格式的文压缩包，然后再把vue项目里面的package.json文件和刚才的压缩包一起拷贝过来一会儿要上传到服务器

4.下载安装Xshell软件（因为官方给的那些东西都很烂不能上传文件之所以用这个软件来远程操作）

5.把Xshell配置远程到服务器上（百度上有一堆教程我就不讲了）

6.在服务器上进入根目录

cd /

7.新建一个放自己项目的文件(我这里文件名叫projects）

mkdir projects

8.进入projects目录

cd /projects

9.首先安装lrzsz

# yum -y install lrzsz

10.上传文件，执行命令rz，会跳出文件选择窗口，选择压缩好的dist文件与package.json文件，点击确认即可。

# rz

11.解压刚才上传的dist文件（这里用的压缩包名称是dist.tar）

tar -xvf dist.tar

12.安装node.js

上node.js官网下载linux版本的安装包
上传安装包
```
# rz
```
解压
```
tar -xvf 安装包名
```

移动

cd /usr/local/
mv 解压文件路径/安装包名/ nodejs

npm与node命令生效

ln -s /usr/local/nodejs/bin/npm /usr/local/bin/
ln -s /usr/local/nodejs/bin/node /usr/local/bin/

查看nodejs是否安装成功
```
node -v
npm -v
```

13.进入projects目录

cd /projects

14.加载我们项目需要的包

npm install

15.安装Nginx （这里讲的很详细）与开始渲染

https://www.cnblogs.com/wbl001/p/11546450.html

安装所需插件

安装编译工具及库文件

1

yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel pcre-devel

　　

gcc、gcc-c++ # 主要用来进行编译相关使用

openssl、openssl-devel # 一般当配置https服务的时候就需要这个了

zlib、zlib-devel # 主要用于文件的解压缩

pcre、pcre-devel # Nginx的rewrite模块和HTTP核心模块会用到PCRE正则表达式语法

make # 遍历

make install # 安装
创建nginx目录
```
cd /usr/local

mkdir nginx
```

下载并解压nginx

cd /usr/local/nginx

wget https://nginx.org/download/nginx-1.14.2.tar.gz  #下载

tar -zxvf nginx-1.6.2.tar.gz   #解压

进入安装包目录
```
cd nginx-1.14.2
```
　　
编译安装nginx，默认安装到 /usr/local/nginx中
```
./configure

make && make install
```
　　
切换到/usr/local/nginx安装目录（看看就行）
```
cd /usr/local/nginx
```

进入conf目录修改nginx.conf

cd /usr/local/nginx/conf
 
vi nginx.conf

（如果不知道怎么使用vi命令看这个文档 https://blog.youkuaiyun.com/cyl101816/article/details/82026678 ）

location / {
            root   /projects/dist;  // 指定目录
            index  index.html index.htm;
        }

保存文件（先按ESC键，wq！强制保存并退出）
查看nginx.conf配置是否正确
```
/usr/local/nginx/sbin/nginx -t
```

16.启动nginx服务

切换目录到/usr/local/nginx/sbin下面

启动nginx命令：

./nginx

附件（可以忽略）

cd /usr/local/nginx/sbin/
 
./nginx   #启动
./nginx -s stop  #停止
./nginx -s quit  #退出
./nginx -s reload  #重启  修改配置后重新加载生效<br><br>./nginx -s reopen ：重新打开日志文件<br>