在服务器部署vue

在 服务器中利用Nginx部署vue前端项目

---

1. 修改项目配置

// 在 build 文件夹中的 index.js文件
assetsPublicPath: '/'  ==> assetsPublicPath: './'
//两处都要修改 使用vscode的 ctrl+F查找,如果出现问题请只修改第一个。
 productionSourceMap: true,  ==> productionSourceMap: false,
//开发调试的时候还要改回来
//端口不用修改吧，我这里发现跟端口没什么关系
//注意：开启一个新的端口前不管你用的是阿里云、腾讯云还是华为云，都要去把安全组规则把端口开了
//国内服务器备案爆炸，大家可以使用国外的服务器，具体用什么请私聊或者自行知乎百度
//如何去除 vue中的/#/？
  /*
  1.router 的 index.js中加入：mode:'history'
  */
export default new Router({
  base: '/',
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'mall',
      component: Mall
    }
  ]
})

2.打包

npm run build  #打包命令
#打包后得到一个dist文件夹
+--dist
   +--static
   +--index.html
#整个文件夹压缩用filezilla上传到需要的目录再解压
+--home
   +--Mall
      +--page   #前端
         +--dist
            +--static
            +--index.html
      +--service  #后端
###实际上我将使用两台服务器分别部署前后端来减轻服务器的压力（实际是穷）
##也可以是后端java springBoot中
+--resource
   +--static
   +--templates
      +--index.html

3.下载Nginx

# 中文文档说明 https://www.nginx.cn/install
# 英文官方（最权威，推荐） 
#为了确保你的make可用，请检查，检查方法 shell里直接输入 make
#如果make命令不存在，请安装gcc 和make
yum -y install gcc automake autoconf libtool make
yum install gcc gcc-c++
#一般我们都需要先装pcre, zlib，前者为了重写rewrite，后者为了gzip压缩
cd /usr/local/src
wget https://ftp.pcre.org/pub/pcre/pcre-8.44.tar.gz 
tar -zxvf pcre-8.44.tar.gz
cd pcre-8.44
./configure
make
make install
# 安装zlib
wget http://zlib.net/zlib-1.2.11.tar.gz
tar -zxvf zlib-1.2.11.tar.gz
cd zlib-1.2.11
./configure
make
make install
# 安装 ssl
cd /usr/local/src
wget https://www.openssl.org/source/openssl-1.1.1g.tar.gz
tar -zxvf openssl-1.1.1g.tar.gz
####正式安装nginx
wget http://nginx.org/download/nginx-1.18.0.tar.gz
tar -zxvf nginx-1.18.0.tar.gz
cd nginx-1.18.0
 
./configure --sbin-path=/usr/local/nginx/nginx \
--conf-path=/usr/local/nginx/nginx.conf \
--pid-path=/usr/local/nginx/nginx.pid \
--with-http_gzip_static_module \
--with-http_stub_status_module \
--with-file-aio \
--with-http_realip_module \
--with-http_ssl_module \
--with-pcre=/usr/local/src/pcre-8.44 \
--with-zlib=/usr/local/src/zlib-1.2.11 \
--with-openssl=/usr/local/src/openssl-1.1.1g
                  ###--with-pcre=/usr/local/src/pcre-8.44 指的是pcre-8.44 的源码路径。
                  ###--with-zlib=/usr/local/src/zlib-1.2.11指的是zlib-1.2.11 的源码路径。
make -j2
make install
#安装成功后 /usr/local/nginx 目录下如下
fastcgi.conf          fastcgi_params          html     koi-win  mime.types          nginx       nginx.conf.default  scgi_params.default  uwsgi_params.default
fastcgi.conf.default  fastcgi_params.default  koi-utf  logs     mime.types.default  nginx.conf  scgi_params         uwsgi_params         win-utf

# 启动
## 1.检查80端口是否被占用
netstat -an0|grep 80
## 2.如果被占用请杀死进程
kill -9 pid  #上一步显示的pid(进程号)
## 启动命令
sudo /usr/local/nginx/nginx
## 输入ip看到

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BPIZmLCw-1604920296091)(images/nginx-install-success.png)]

4.nginx 配置

#原来的配置文件详细参数我自己也没搞清楚，以后再补充说明。
#我先来说明怎么用
cd /usr/local/nginx
#找到nginx.conf   vi 不是不会，但是效率太慢了，直接filezilla下载到电脑里用notepad++修改（什么编辑器不是问题）

#-----------nginx.conf----------------
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


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

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #开启压缩静态资源
    gzip  on;
	gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
	
	
	#包含配置
	include mall.conf;
}


###------mall.conf--------我把每个项目的配置抽取出来，刚开始是可以放入nginx.conf一起的--

server {
		listen		80;  #映射的端口
		server_name		localhost;   #ip 使用默认的
		root 	/home/Mall/page/dist; # index.html的根目录
		location / {
			#root	/home/Mall/page/dist;  
			try_files	$uri $uri/ @router;
			index 	index.html index.htm;
		}
		
		location @router {
			rewrite ^.*$/index.html last;
		}
		
		error_page	500 502 503 504 /50x.html;
		
		location = /50x.html {
			root 	html;
		}
}

5.运行

cd /usr/local/nginx
#利用filezilla把上述的两个文件都上传到此目录中
#运行命令
sudo /usr/local/nginx/nginx -s reload
#大功告成！

Good bye~