Vue-router defaults to hash mode — the hash of a URL is used to simulate a full URL so that the page does not reload when the URL changes.

If we don’t want ugly hashes, we can use the history mode of the route. This mode requires support from the back end, which configures the environment. Vue-router configurations

Const router = new VueRouter({mode: 'history', // hash or history base: '', // base points to url routes: [...] })Copy the code

As a front-end developer, I will explain how to deploy my VUE project to the server in the mode of history.

One, site domain name root path project deployment project

Configuration of front-end projects

Since the project is deployed under the root path of the domain name, the URL is the domain name path, so the base is empty and can be omitted · The code is as follows:

// router.js const router = new VueRouter({mode: 'history', routes})Copy the code

Server Configuration

1. The server uses Nginx as a proxy for static resources. The configuration of Nginx is as follows

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

Copy the code

Add the code above to the serve agent, details please refer to the website: router.vuejs.org/zh/guide/es… Ngnix full code:

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; // Domain name 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/ {// proxy tomact does not need port words proxy_pass http://localhost:8080/; } access_log /www/wwwlogs/access.log; } include /www/server/panel/vhost/nginx/*.conf; }Copy the code

Two, non-website root path project deployment (key!!)

Tomact project deployment

Generally our tomact is running on the server port 8080, need to deploy the static resource directory to prevent webapps, throughhttp://xxxxx:8080/ project name, with the following effect Analyzing the URL, domain name + port + project file name + page path constitute the URL. According to the resolution of Base by vue-Router, it can be known that base is the project name ‘/dream/’. Then look at the configuration of the front-end routing file


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


Copy the code

Guess success! By default, vue CLI assumes that your application is deployed on the root path of a domain name, such as www.my-app.com/. If the application is deployed in a… www.my-app.com/my-app/, set publicPath to /my-app/. Please see the official website: cli.vuejs.org/zh/config/#… So the publicPath of the project is: ‘dream’, then look at the vue.config.js configuration:

module.exports = {
  publicPath: '/dream'
}
Copy the code

To do both, you also need to configure tomact, add the Web-INF directory to the project root, and add web.xml to add some content

<? The 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>Copy the code

How to feel with port number access a little ugly, want to remove the port number, can be through the ngnix agent Tomact8080 port, code as above

Location /static/ {// proxy tomact does not need port words proxy_pass http://localhost:8080/; }Copy the code

/static proxy port 8080Hadream. Shop/static/drea… /static/dream/ ‘/static/dream/’ /static/dream/ ‘/static/dream/

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

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

Final effectIf you have any other questions, please add me to wechatliu8931ask