Problem description

  • Remove unsightly /#/ from routes
  • Route with # number, wechat public account, wechat payment, wechat sharing and automatic login, processing pit
  • The domain name must be deployed in the level 2 directory
  • Refresh the 404

To solve the problem

# is removed from the VUE route

Route History mode official document

vue router js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
const routes = [
  {
    path: ' '.component: require('.. /components/HelloWorld.vue').default
  },
  {
    path: '/home'.component: require('.. /components/Home.vue').default
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;
Copy the code

Relative paths are used in projects

This is common development knowledge vue.config.js

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

Deployment to a secondary directory

vue router js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
const routes = [
  {
    path: ' '.component: require('.. /components/HelloWorld.vue').default
  },
  {
    path: '/home'.component: require('.. /components/Home.vue').default
  }
]

If my open address is xxxxxx.com/m/, the module is configured, or placed under a subfolder, then there will be a problem. In fact, this is because the Router cannot find the component in the path and therefore cannot render. Just modify the index.js in the router and add a base path. * /

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

export default router;
Copy the code

Nginx configuration

server { listen 8074; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/host.access.log main; location /m/{ alias /data/; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; index index.html index.htm; try_files $uri $uri/ /m/index.html; }}Copy the code

Refreshing 404 Problems

The reason: That’s because in history mode, I dynamically change the path in the browser’s address bar by using js window.history. I didn’t make an HTTP request, but when I typed the address directly into the browser, I had to make an HTTP request to the server. But the target does not exist on the server, so 404 is returned

Solution: Back-end Nginx configuration Solution 1: Official recommendation

default.conf

server { listen 8074; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/host.access.log main; location /m/{ alias /data/; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; index index.html index.htm; try_files $uri $uri/ /m/index.html; }}Copy the code

Solution 2: Match errPR_page

The location / {root/data/nginx/HTML; index index.html index.htm; error_page 404 /index.html; }Copy the code

Successfully solved

Refresh the home page to access resources normally

Attached lot code