Nginx настраивает пакетный проект vue для решения проблемы 404 обновления страницы | nginx настраивает многотерминальный доступ

Nginx

При посещении страницы vue /# делает URL-адрес неприглядным.Использование режима истории H5 может отлично решить эту проблему, но для этого требуется помощь бэкэнда nginx. Дальше настраиваем сами.

Используйте интерфейсную маршрутизацию, но когда вы переключаетесь на новый маршрут, вы хотите прокрутить страницу вверх или сохранить исходное положение прокрутки, как и при перезагрузке страницы, vue-router позволяет настроить способ прокрутки при маршрут переключает страницы.

При создании экземпляра Router вы можете указать метод scrollBehavior:

const router = new VueRouter({
  routes: [...],
  mode: 'history', //H5 history模式
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return { x: 0, y: 0 } //让页面滚动到顶部
  }
})

Дополнительные примеры поведения при прокрутке см. на официальном сайте.Router.V UE JS.ORG/THIS/EXPIVESION/AD...

После упаковки это вызовет проблему.Обновите страницу файла упаковки, и страница 404 будет пустой.Далее вам нужно настроить файл nginx для доступа к упакованному файлу.

Стартовой страницей отдельной страницы vue является файл index.html, а маршрут на самом деле не существует, поэтому возникнет проблема с обновлением страницы 404, и вам нужно настроить страницу доступа vue для сопоставления с index.html.

Прежде всего, нам нужно определить путь к статическим ресурсам пакета, нам нужно установить абсолютный путь.

config/index.js

build: {
	assetsPublicPath: '/'
}

Затем настройте проблему сопоставления nginx

location / {
    root   /www/dist;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;  //映射到index.html上
}

Цзян Цзы может посетить.

Некоторые студенты могут столкнуться с проблемой, которую nginx настраивает терминал ПК и мобильный терминал для автоматического прыжка. Далее настроите его.

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;
    
    server {
        listen       80;
        server_name  www.baidu.com; //服务器网址

        set $mobile_rewrite do_not_perform; //设置pc重定向

        if ($http_user_agent ~* "(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os )?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino") {
              set $mobile_rewrite perform;
              
        } //设置移动端重定向

        location / {
            root   /www/dist/m; //移动端root
            if ($mobile_rewrite = do_not_perform) { //根据重定向 重置 root
                root /www/dist; //pc端root
            }
            index  index.html index.htm;
            try_files $uri $uri/ /index.html; //映射到index.html上
        }
        

        location ~ ^/api {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_pass http://unix:/home/dev/official/official.sock;
            proxy_max_temp_file_size   2m;
            proxy_connect_timeout      90;
            proxy_send_timeout         90;
            proxy_read_timeout         90;
            proxy_buffer_size          4k;
            proxy_buffers              4 32k;
            proxy_busy_buffers_size    64k;
            proxy_temp_file_write_size 64k;
            client_max_body_size       5m;
        }  
        error_page  404              http://www.baidu.com;
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

Jiang Zi может одновременно использовать один и тот же URL для доступа к мобильному терминалу и на боковом проекте PC Friends PC.

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

Категории