Vue 프로젝트를 패키징하고 nginx 서버를 배포하는 방법

사용 시나리오:

프런트엔드와 백엔드 분리 프로젝트를 자주 사용하는 경우 프런트엔드 Vue를 패키징한 다음 배포해야 합니다.

1. Packaging

vue 프로젝트는 실제로 다음 명령문을 통해 직접 패키징할 수 있습니다.

npm run build

기본 패키징 상황은 다음과 같습니다.

패키징 이름과 정적 리소스 위치를 수정해야 하는 경우 해당 구성:

1. 먼저 프로젝트 루트 디렉터리에 vue.config.js 파일을 만듭니다.

구성 내용은 다음과 같습니다(교차 도메인 문제 해결 포함):

module.exports = {
    //打包
    publicPath: './',
    outputDir: 'test', //打包输出目录
    assetsDir: './static', //放置生成的静态资源
    filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
    lintOnSave: false, //设置是否在开发环境下每次保存代码时都启用 eslint验证
    productionSourceMap: false,// 打包时不生成.map文件
    
    // 解决跨域配置
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 8080,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:9090',     //代理的目标地址(后端设置的端口号)
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '/api': ''                     //选择忽略拦截器里面的单词
                }
                /*也就是在前端使用/api可以直接替换为(http://localhost:9090)*/
            }
        }
    },
}

2. 라우팅(router/index.js)에서 히스토리 사용 여부를 확인하고, 사용한다면 해시로 변경하세요. 또는 해시가 기본적으로 사용되므로 모드를 선택 취소하세요.

const router = new VueRouter({
  /*mode: 'history',*/
  mode: 'hash',
  routes:[]
})
 
export default router

그런 다음 npm run build를 다시 사용하여 패키징하면 테스트 폴더가 나타나고 정적 파일은 static에 배치됩니다.

이제 포장이 끝났습니다.

3.패키지 파일 경로 찾기

패키지 index.html 파일을 더블클릭하시면 홈페이지가 나옵니다.

2. 배포(nginx)

먼저 여기에 소개되지 않은 nignx를 설치해야 합니다. (또는 특정 설치 단계는 나중에 nginx 섹션에 배치됩니다.)

nginx.conf에서 직접 구성:

server {
    listen   8021;
    server_name  localhost;
 
    location /test{
        alias    /home/hyq/vue_file;
        index  index.shtml index.html index.htm;
    }

구성의 구체적인 의미:

#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;
    
    ssi on;
    ssi_silent_errors on;
    ssi_types text/shtml;
    
    #定义的服务器列表
    upstream cms {
        #这里代表代理的项目端口为127.0.0.1:8111端口(weight等配置自行查询)
        server 127.0.0.1:8111 weight=5 max_fails=3 fail_timeout=20s;
    }
    server {
        listen       8096;              #nginx使用8096
        server_name  localhost;         #服务名称

        location /menhu/cms {
            proxy_pass http://cms;      
            #请求转向cms 定义的服务器列表。也就是访问localhost:8096/menhu/cms 会转向到上方服务器列          #表中的127.0.0.1:8111
        }   

        location /qgxzzfzhgljdpt {
            root   D:\BDWorkParce3\LPT_MENHU\wwwroot_release;   #根目录
            index  index.shtml index.html index.htm;            #设置默认页
            #访问localhost:8096/qgxzzfzhgljdpt 会打开        D:\BDWorkParce3\LPT_MENHU\wwwroot_release\qgxzzfzhgljdpt下级中的index.shtml/index.html/index.htm默认页
        }
        location ^~ /template {
            return 404;
        }
        location = /c/ {
            return 404;
        }
        location = /css/ {
            return 404;
        }
        location = /images/ {
            return 404;
        }
        location = /include/ {
            return 404;
        }
        location = /js/ {
            return 404;
        }
        location = /style/ {
            return 404;
        }
        location = /upload/ {
            return 404;
        }
        location = /html/ {
            return 404;
        }
        location = /root/ {
            return 404;
        }
        location ~ .*.(svn|Git|git) {
            return 404;
        }

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

}
########### 每个指令必须有分号结束。#################
#user administrator administrators;  #配置用户或者组，默认为nobody nobody。
#worker_processes 2;  #允许生成的进程数，默认为1
#pid /nginx/pid/nginx.pid;   #指定nginx进程运行文件存放地址
error_log log/error.log debug;  #制定日志路径，级别。这个设置可以放入全局块，http块，server块，级别以此为：debug|info|notice|warn|error|crit|alert|emerg
events {
    accept_mutex on;   #设置网路连接序列化，防止惊群现象发生，默认为on
    multi_accept on;  #设置一个进程是否同时接受多个网络连接，默认为off
    #use epoll;      #事件驱动模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport
    worker_connections  1024;    #最大连接数，默认为512
}
http {
    include       mime.types;   #文件扩展名与文件类型映射表
    default_type  application/octet-stream; #默认文件类型，默认为text/plain
    #access_log off; #取消服务日志    
    log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #自定义格式
    access_log log/access.log myFormat;  #combined为日志格式的默认值
    sendfile on;   #允许sendfile方式传输文件，默认为off，可以在http块，server块，location块。
    sendfile_max_chunk 100k;  #每个进程每次调用传输数量不能大于设定的值，默认为0，即不设上限。
    keepalive_timeout 65;  #连接超时时间，默认为75s，可以在http，server，location块。

    upstream mysvr {   
      server 127.0.0.1:7878;
      server 192.168.10.121:3333 backup;  #热备
    }
    error_page 404 https://www.baidu.com; #错误页
    server {
        keepalive_requests 120; #单连接请求上限次数。
        listen       4545;   #监听端口
        server_name  127.0.0.1;   #监听地址       
        location  ~*^.+$ {       #请求的url过滤，正则匹配，~为区分大小写，~*为不区分大小写。
           #root path;  #根目录
           #index vv.txt;  #设置默认页
           proxy_pass  http://mysvr;  #请求转向mysvr 定义的服务器列表
           deny 127.0.0.1;  #拒绝的ip
           allow 172.18.5.54; #允许的ip           
        } 
    }
}

그런 다음 nginx를 시작하거나 다시 시작하세요.

방문: 서버 주소: 8021/test.

위 내용은 Vue 프로젝트를 패키징하고 nginx 서버를 배포하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!