vue2/vue3 プロジェクトを nginx にデプロイする (履歴モード)

1. Vue プロジェクトのルーティング履歴モードの設定 (このステップでは、vue2 と vue3 の全体の設定が異なります)

vue2の設定

const router = new Router({
  mode: 'history', // 访问路径不带井号  需要使用 history模式
  base: '/bank/page',  // 基础路径
  routes: [
    {
      path: '/count',
      name: 'count',
      component: resolve => require(['@/views/count'], resolve) // 使用懒加载
    }
  ]
});

vue3の設定

import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
  // 指定路由的模式,此处使用的是history模式
  history: createWebHistory(),
  // 路由地址
  routes: [{
    path: '/todo-list',
    // 必须添加.vue后缀
    component: () => import('../views/todo-list.vue')
  }]
})

2. dist パッケージをパッケージ化して、配置するディレクトリにコピーします

プロジェクトをパッケージ化し、dist ファイルを生成し、それを圧縮します

npm run build

サーバーディレクトリにコピーして解凍します

ここに dist.zip パッケージを置き/usr/web/myBlog/、
解凍します。

unzip dist.zip

3.nginx.configを設定する

通常、nginx をインストールすると、以下のファイルになります/usr/local/nginx/conf/。新しい構成を
内にhttp{}

server {
        listen 8080;     #1.你想让你的这个项目跑在哪个端口
        server_name 120.48.9.40;     #2.当前服务器ip
        location / {
           root   /usr/web/myBlog/dist/;     #3.dist文件的位置(根据自己dist包放置的位置决定) 
           try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写，history和bash通用，这里配置主要是兼容history模式，进行一个404的重定向)
        }
    }

4.nginxサービスを開始します

cd で nginx 実行可能ディレクトリに移動します

cd /usr/local/nginx/sbin/

nginxサービスを開始する

./nginx

ng を再起動するコマンドが次であることを追加します。

./nginx -s reload

ng コマンドを実行するたびにディレクトリに移動したくない場合はsbin、コマンドを実行してグローバル変数を設定し、/usr/local/nginx/sbin/nginxnginx 用のファイルを実行して、/usr/local/bin/環境変数ディレクトリを設定します。

ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/

そうすれば、どこでも次のコマンドを使用できるようになります

nginx

例えば：

nginx -s reload

5. ページにアクセスします (すべての設定は成功しました^_)

設定したサーバー IP + ポート

6. ファイアウォールでポートを開く

現時点でページにアクセスできない場合は、サーバーがファイアウォールを設定していることが原因である可能性があります。

systemctl status firewalld ファイアウォールが
オンになっているかを確認し、Active: active (running) が強調表示されていれば起動状態です。
アクティブ: 非アクティブ (デッド) グレーは停止を意味し、文字を読むことができます。
起動状態を設定します。

firewall-cmd --zone=public --query-port=8092/tcp ポートが開いているかどうかを確認します
firewall-cmd --zone=public --add-port=8090/tcp --permanent 開いているポートを追加します (ポートは自分で決定します)
firewall-cmd --reload リロード
ページアクセステストを再実行します。