Развертывание проектов 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 и сожмите его.

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/nginxвыполнить файл для nginx и /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 (работает), это означает, что он находится в начальном состоянии.
Активный: неактивный (мертвый) серый означает стоп, и вы можете читать слова.
Настройте состояние запуска.

firewall-cmd --zone=public --query-port=8092/tcp Проверить, открыт ли порт
firewall-cmd --zone=public --add-port=8090/tcp --permanent Добавить открытый порт (порт определяется самостоятельно)
firewall-cmd --reload Reload
Перезапустить проверку доступа к странице.