Vue プロジェクトをパッケージ化して nginx サーバーをデプロイする方法

使用シナリオ:

フロントエンドとバックエンドの分離プロジェクトを頻繁に使用する場合、フロントエンド Vue をパッケージ化してデプロイする必要があります。

1. パッケージ化

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)

まず、ここでは紹介されていない nigx をインストールする必要があります。 (または、具体的なインストール手順は後ほど 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 中国語 Web サイトの他の関連記事を参照してください。