2021-04-20发表2020-01-17更新6 分钟读完 (大约962个字)0次访问

Linux服务器下部署vue 2.0项目

InterviewCoder

# 一、安装 VUE 环境

1.wget 指定进行下载，下载后文件默认存在根目录下的 root 包下面；

1	wget https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz

解压缩

1
2
3

xz -d node-v16.14.0-linux-x64.tar.xz  #将xz格式解压为tar

tar -xvf node-v16.14.0-linux-x64.tar  #将tar解压为文件

重命名文件夹

1 2	mv node-v16.14.0-linux-x64 nodeJS-V16.14.0

配置 node.js 环境变量

1	vim /etc/profile

进入编辑，在文件最下面加上如下字段

1 2	export NODEJS_HOME=/root/nodeJS-V16.14.0 export PATH=$NODEJS_HOME/bin:$PATH

个人比较喜欢用 Xftp 将 profile 文件传输到 windows 系统下进行配置后再覆盖回去

配置完成后使用 source 命令重新执行刚修改的初始化文件，使之立即生效，而不必注销并重新登录

1	source /etc/profile

检查环境变量是否配置成功

node -v

安装 WebPackage

1	npm install webpack -g --registry=https://registry.npm.taobao.org

# 二、Nginx 环境搭建配置

wget 指定进行下载，下载后文件默认存在根目录下的 root 下面；

1	1.wget https://nginx.org/download/nginx-1.21.6.tar.gz

解压缩

1	tar -zxvf nginx-1.21.6.tar.gz

进入 nginx 文件夹

1	cd /root/nginx-1.21.6

检查配置

1	./configure

安装 gcc 环境，有就不需要安装了

1	yum install gcc-c++

安装 PCRE 依赖库

1	yum install -y pcre pcre-devel

安装 zlib 依赖库

1	yum install -y zlib zlib-devel

安装 OpenSSL 安全套接字层密码库

1	yum install -y openssl openssl-devel

再次执行配置检查命令

1 2	./configure

编译安装 nginx

1	make install

查找默认安装路径

1	whereis nginx

配置 nginx 环境变量

1	vim /etc/profile

进入编辑，在文件最下面加上如下字段

1	export PATH=$PATH:/usr/local/nginx/sbin

个人比较喜欢用 Xftp 将 profile 文件传输到 windows 系统下进行配置后再覆盖回去

初始化配置

1	source /etc/profile

检查环境变量是否配置成功

nginx -v

启动 nginx

nginx

查看 nginx 是否启动，远程访问服务器，跳出 nginx 欢迎界面就算配置成功了！

nginx 常用命令

启动服务：nginx
退出服务：nginx -s quit
强制关闭服务：nginx -s stop
重载服务：nginx -s reload　　（重载服务配置文件，类似于重启，但服务不会中止）
验证配置文件：nginx -t
使用配置文件：nginx -c "配置文件路径"
使用帮助：nginx -h

# 三、发布 VUE 项目

# 打包 VUE 项目

1. 首先配置好线上环境的路径：prod.env

module.exports = {
	NODE_ENV: '"production"',
	ENV_CONFIG: '"prod"',
	MANAGEMENT_SERVICE_API: '"http://42.193.125.92:7815"',
}

2. 控制台输入 npm run build:prod

3. 打包完会生成一个 dist 文件夹

4. 将 dist 文件夹内容覆盖到 /usr/local/nginx/html 目录下面

5. 修改 nginx 配置

1	/usr/local/nginx/conf/nginx.conf 编辑打开

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       8099;  #配置当前服务端口
        server_name  localhost; #配置当前服务IP
        
        location / {
            root   html/dist; #配置服务根目录
            index  index.html index.htm; #配置服务索引页面
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

6. 重启或关闭重开 Nginx

nginx -s reload #重启


nginx -s stop #强制停止

nginx #开启

# 关于我

Brath 是一个热爱技术的 Java 程序猿，公众号「InterviewCoder」定期分享有趣有料的精品原创文章！