[Сводка проекта Vue] развертывание проекта nginx

Vue.js

Разработка проекта завершена, и следующий шаг — выход в онлайн.vueРазвертывание проекта, фронтенд нашей компании развернут вnginxна сервере, оnginxСвязанные документы см. в ней самостоятельно; в этой статье описаны только некоторые проблемы, возникшие во время развертывания.

Пакет

vueПосле упаковки проекта создается ряд статических файлов, включая запрос проекта.IPВсе в пакет, если фоновая служба изменится, то ваш интерфейсный файл необходимо перекомпилировать и запаковать.Резюме проекта фонового управленияУпомянутый внешний интерфейс сам запрашивает файл конфигурации и динамически изменяет вашу соответствующую конфигурацию.

  • статические файлы
// config.json
{
  "api": "test.com"
}
  • файл запроса

в проектеstoreПри запросе файла конфигурации напишитеstate, вы можете получить глобальный доступ к своей конфигурации, когда вы вызываете ее

// api.js
GetConfigApi() {
  return new Promise((resolve, reject) => {
    axios
      .get(`/config.json?v=${new Date().getTime()}`)
      .then(result => {
        const configApi = {
          API: result.data['api'], // 统一接口
        };
        resolve(configApi);
      })
      .catch(error => {
        reject(error);
      });
  });
}

развертывание nginx

потому чтоvue-routerимеютhashа такжеhistoryДва разных режима, используйте разные режимы,nginxкомплектация другая,hashВ моде менять не нужно, нужно только развернуть свои front-end файлы, так что обсуждаем только здесьhistoryв режиме.confмодификация файла

модификация доступаnginxконфигурационный файлnginx.conf

server {
  listen  80;
  server_name  test.com;

  location / {
    root  /front; // 前端文件路径
    index  index.html; // hash模式只配置访问html就可以了
    try_files $uri $uri/ /index.html; // history模式下
  }
}

После завершения модификации перезапустите службу доступаtest.com

Развернуть в подкаталог

Когда нам нужно развернуть проект в подкаталоге, нам нужно изменить файл проектаBASE_URL, который создает абсолютный путь доступа в подкаталоге. изменить соответствующие.confконфигурационный файл

server {
  listen  80;
  server_name  test.com;

  location /demo { // 子级目录
    alias  /front/demo;
    index  index.html;
    try_files $uri $uri/ /demo/index.html; 
  }
}

После завершения модификации перезапустите службу доступаtest.com/demo

Обработка кеша

Статические файлы внешнего интерфейса часто кэшируются браузером, и после компиляции проектаjs,css, фотки и т.п. собственно уже естьhashзначение для удаления кеша, но после обновления проекта все равно будет проблема с кешем, это связано с тем, что вся запись нашего проекта находится вindex.htmlфайл, браузер фактически кэширует нашhtmlстраницу, поэтому мы собираемсяnginxсообщает браузеру,htmlФайлы не кэшируются.

  location /demo {
    add_header Cache-Control 'private, no-store, max-age=0';
    ...
  }

Суммировать

Обсуждается только здесьnginxсвязанные развертывания, на самом делеvue-routerДокументацияВыше приведены соответствующие примеры конфигурации.

Другие сводные статьи:

Добро пожаловать, чтобы обратить внимание на официальный аккаунт, каждый может общаться и прогрессировать вместе.

Категории