Vue前端项目打包，并部署Vue项目到Linux云服务器上

一. vue前端项目打包

1.使用vscode开发项目
2.在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号，由于这是在现实的部署当中所以必须要在生成环境下举行项目的部署。
如图所示：

3.在config目录下的index.js文件当中要改assetsPublicPath: ‘./’ 否则不能正确载入静态文件

1. build: {
2.     // Template for index.html
3.     index: path.resolve(__dirname, '../dist/index.html'),
5.     // Paths
6.     assetsRoot: path.resolve(__dirname, '../dist'),
7.     assetsSubDirectory: 'static',
8.     assetsPublicPath: './',
9. }

复制代码

4.终端输入

1. npm run build

复制代码

运行此下令行后会自动生成一个dist文件夹，这就是打包后生成的项目文件。之后将此文件夹放到服务器上，路径要与nginx配置路径同等。

二. Linux服务器上安装nginx并且举行相干配置

1. 安装必要软件

1.1 使用xshell毗连终端

1.2 使用xftp传输文件

2. 安装nginx

2.1 下载nginx
（两个方法）
方法一: 下载nginx，然后使用xftp传输到云服务器上
方法二: 下令行下载
http://nginx.org/download/

1. wget http://nginx.org/download/nginx-1.13.6.tar.gz

复制代码

2.2 解压nginx安装包
进入nginx目录

1. tar -zvxf nginx-1.13.6.tar.gz
2. cd nginx-1.13.6

复制代码

2.3 make编译安装nginx

1. ./configure --with-http_ssl_module --with-http_gzip_static_module
2. make
3. make install

复制代码

2.4 启动步伐

1. cd /usr/local/nginx/sbin/
2. ./nginx

复制代码

2.5 查看运行状态

1. ps aux | grep nginx

复制代码

3. nginx 前端项目署理地址配置

（Vue项目设置了当地署理，部署到Nginx上必要使用反向署明白决生产环境跨域问题）
vue项目署理设置
当地署理地址配置文件 config/index.js

1.     proxyTable: {
2.       '/api': {
3.         target: 'https://api.weixin.qq.com',   //请求地址
4.         changeOrigin: true, //true表示跨域
5.         secure: false,
6.         ws: true,
7.         logLevel: 'debug',
8.         pathRewrite: {
9.           '^/api': ''
10.         }
11.       },
12.       '/token': {
13.         target: 'http://139.9.xxx.77:8089',   //请求地址
14.         changeOrigin: true, //true表示跨域
15.         secure: false,
16.         ws: true,
17.         logLevel: 'debug',
18.         pathRewrite: {
19.           '^/token': ''
20.         }
21.       }
22.     },

复制代码

nginx署理设置
在/usr/local/nginx/conf目录下配置nginx.conf文件修改内容
（1） 修改root，（root为项目打包后文件的存放路径。）

1.       location / {
2.             root   /home/www/dist;
3.             index  index.html index.htm;
4.         }

复制代码

（2）设置nginx反向署理（办理生产环境跨域问题），署理样式如下
查看反向署理详细文章了解Nginx反向署理更多信息

1.        location /api/ {
2.             proxy_pass https://api.weixin.qq.com/;
3.             add_header Content-Type "text/plain;charset=utf-8";
4.             add_header 'Access-Control-Allow-Origin' '*';
5.             add_header 'Access-Control-Allow-Credentials' 'true';
6.             add_header 'Access-Control-Allow-Methods' 'GET, POST';
7.        }
8.        location /token/ {
9.             proxy_pass http://139.9.xxx.77:8089/;
10.             add_header Content-Type "text/plain;charset=utf-8";
11.             add_header 'Access-Control-Allow-Origin' '*';
12.             add_header 'Access-Control-Allow-Credentials' 'true';
13.             add_header 'Access-Control-Allow-Methods' 'GET, POST';
14.        }

复制代码

完整配置文件server部门如下

1. server {        listen 8080;        server_name localhost;        #charset koi8-r;        #access_log  logs/host.access.log  main;                location / {
2.             root   /home/www/dist;
3.             index  index.html index.htm;
4.         }
5.         #error_page  404              /404.html;        # redirect server error pages to the static page /50x.html        #        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }        # proxy the PHP scripts to Apache listening on 127.0.0.1:80        #        #location ~ \.php$ {        #    proxy_pass   http://127.0.0.1;        #}        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000        #        #location ~ \.php$ {        #    root           html;        #    fastcgi_pass   127.0.0.1:9000;        #    fastcgi_index  index.php;        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;        #    include        fastcgi_params;        #}        # deny access to .htaccess files, if Apache's document root        # concurs with nginx's one        #        #location ~ /\.ht {        #    deny  all;        #}       location /api/ {
6.             proxy_pass https://api.weixin.qq.com/;
7.             add_header Content-Type "text/plain;charset=utf-8";
8.             add_header 'Access-Control-Allow-Origin' '*';
9.             add_header 'Access-Control-Allow-Credentials' 'true';
10.             add_header 'Access-Control-Allow-Methods' 'GET, POST';
11.        }
12.        location /token/ {
13.             proxy_pass http://139.9.xxx.77:8089/;
14.             add_header Content-Type "text/plain;charset=utf-8";
15.             add_header 'Access-Control-Allow-Origin' '*';
16.             add_header 'Access-Control-Allow-Credentials' 'true';
17.             add_header 'Access-Control-Allow-Methods' 'GET, POST';
18.        }
19.     }

复制代码

4. conf配置文件的启动

在现实当中服务器中可能有多个vue前端项目，此时我们只要单独修该conf文件即可，一个前端项目对应的一个conf文件。
conf启动下令符如下：
启动项目指定配置文件

1. cd /usr/local/nginx/sbin/ ./nginx -c conf/nginx_hwfm.conf

复制代码

查看启动进程：

1. ps -ef|grep nginx

复制代码

5. nginx别的常用下令

(1)启动nginx:

1. cd /usr/local/nginx/sbin/
2. ./nginx

复制代码

(2)查看运行状态

1. ps aux | grep nginx

复制代码

(3)停止nginx

1. ./nginx –s stop

复制代码

(4)检查配置文件是否正确

1. ./nginx –t

复制代码

(5)查看nginx版本

1. ./nginx -v

复制代码

(6)配置文件位置

1. /usr/local/nginx/conf/nginx.conf

复制代码

(7)拓展（window下nginx启动下令）

1. cd MyDownloads\nginx-1.15.3
2. start nginx
3. nginx -s stop
4. nginx -s reload

复制代码

参考链接：https://www.jianshu.com/p/c013027069ce

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。