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
进行询问