vue history模式项目线上宝塔面板部署

1,935 阅读3分钟

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式。这种模式需要后端的支持,后端需要对环境进行配置。 vue-router的相关配置

const router = new VueRouter({
  mode: 'history',  // hash 或者history
  base: '',  // base 指向的是url的路径
  routes: [...]
})

作为一名前端开发人员如何将自己的vue项目以history的模式部署到服务器,接下来将由我以实际的案例进行讲解.

一、网站域名根路径的项目部署项目

前端项目的相关配置

由于项目部署在域名根路径下,故URL就是域名路径,所以base为空,可以省略不写· 代码如下:

// router.js配置
const router = new VueRouter({
  mode: 'history',
  routes
})

服务器相关配置

1.服务器采用nginx作为静态资源的代理,nginx的配置如下

location / {
  try_files $uri $uri/ /index.html;
}

将上面的代码添加到serve的代理中,详情请参考官网:router.vuejs.org/zh/guide/es… ngnix全部代码:

user  www www;
worker_processes auto;
error_log  /www/wwwlogs/nginx_error.log  crit;
pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;

events
    {
        use epoll;
        worker_connections 51200;
        multi_accept on;
    }
http
    {
        include       mime.types;
		#include luawaf.conf;
		include proxy.conf;
        default_type  application/octet-stream;
        server_names_hash_bucket_size 512;
        client_header_buffer_size 32k;
        large_client_header_buffers 4 32k;
        client_max_body_size 50m;
        sendfile   on;
        tcp_nopush on;
        keepalive_timeout 60;
        tcp_nodelay on;
        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 256k;
		fastcgi_intercept_errors on;
        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";
        limit_conn_zone $binary_remote_addr zone=perip:10m;
		limit_conn_zone $server_name zone=perserver:10m;
        server_tokens off;
        access_log off;
    server
    {
       listen 80;
        server_name hadream.shop; // 域名名称
        index index.html index.htm index.php;
        root  /www/wwwroot/dist;
        #error_page   404   /404.html;
        include enable-php.conf;
      location / {
          try_files $uri $uri/ /index.html;
        }
              location /static/ {  // 代理tomact就不需要有端口字眼了
        proxy_pass  http://localhost:8080/;
        }
      
        access_log  /www/wwwlogs/access.log;
    }
include /www/server/panel/vhost/nginx/*.conf;
}


二、非网站根路径项目部署(重点!!!)

tomact项目部署

一般我们的tomact都是在服务器8080端口运行,需要部署的静态资源目录防于webapps,通过http://xxxxx:8080/项目名,效果如下 在这里插入图片描述分析url, 域名 + 端口 + 项目文件名 + 页面路径组成了url,根据vue-router对base的解析,可知base为项目名‘/dream/’,再看前端路由文件配置


const router = new VueRouter({
  mode: 'history',
  base: '/dream/',
  routes
})


由此猜想成功! 对于vue-cli脚手架对vue.config.js中publicPath 的说明:, 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 www.my-app.com/。如果应用被部署在一个… www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。详情请看官网: cli.vuejs.org/zh/config/#… 因此该项目的publicPath 为: ‘dream’, 再看vue.config.js配置:

module.exports = {
  publicPath: '/dream'
}

完成以上两件事,还需要配置tomact,在项目根目录添加WEB-INF目录, 并且添加web.xml,添加一下内容

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
           http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1" metadata-complete="true">
  <display-name>Router for Tomcat</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

如何觉得带端口号访问有点丑,想去掉端口号,可以通过ngnix代理tomact8080端口,代码如上

     location /static/ {  // 代理tomact就不需要有端口字眼了
        proxy_pass  http://localhost:8080/;
        }

通过/static代理8080端口,访问:hadream.shop/static/drea…](p3-juejin.byteimg.com/tos-cn-i-k3… 在这里插入图片描述于是我们开始思考现在的url组成,发现此时的base应该为: ‘/static/dream/’, 同理publicPath为: ‘/static/dream’

// router.js
const router = new VueRouter({
  mode: 'history',
  base: '/static/dream/',
  routes
})

// vue.config.js
module.exports = {
  publicPath: '/static/dream'
}

最终实现效果 在这里插入图片描述还有其他问题,可以加我微信 liu8931进行询问