This is the third day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Written in the beginning

There are two modes for Vue urls: Hash mode and History mode.

Hash pattern appears in the url above a # hash character (http://10.1.xx.xx:3006/#/home), which is not very beautiful, not like a normal url http://10.1.xx.xx:3006/home.

Use the history mode, like a normal url backend configuration support is needed For the application of our client application is a single page, if there is no correct configuration, the background when the user directly in the browser to http://oursite.com/user/id will return to 404, it’s not good-looking.

The problem background

The project initially uses the hash mode, which does not require nGINx configuration. However, the project requires wechat payment, and the payment succeeds and the relevant page is returned. In the redirect_URL of wechat payment success, if hash is used, the address content after the callback address hash character # will be automatically intercepted. This is not what we want. This article is a perfect solution to the problem of nginx configuration in history mode. For details, see how to modify it.

Problem solving

Baidu is also a lot of variety, various, finally spent half a day to solve the nginx configuration is not successful, refresh the page 404 problem.

Example Modify the Vue project configuration

  • Modified the common base path of the packaging tool Base

    Here I use the Vite tool as follows:

    import { defineConfig } from 'vite'
export default defineConfig({
  // Omit the rest of the configuration...
  base: '/medical-record-front/'.// 'medical-record-front' is the name of the subdirectory where the server stores the index.html
})

Copy the code

    Vue.config.js /ts modifies publicPath attribute in vue.config.js/ts

    module.exports = {
    // ...
	publicPath: "/medical-record-front/" 
}
Copy the code

    To repackage, see dist/index.html:

Has been changed to the configured medical-record-front absolute path.

  • Vue-router4 Set the routing mode

    The version OF Vue-Router4 I used:

    import { createRouter, createWebHistory } from "vue-router";
import routes from "./path";

const router = createRouter({
  history: createWebHistory("medical-record-front"), // Name of the service terminal directory
  routes,
});
Copy the code

    Vue-router Other versions:

    new Router({
	mode: "history".base: "medical-record-front"
})
Copy the code

Ok, we have finished the project modification, the last step is to change the server nginx conf configuration.

Modify the Nginx configuration

Modify the nginx.conf configuration as follows, here is the key configuration to solve the problem:

server { // ... Location /medical-record-front/ {alias /app/wwwroot/medical-record-front/; // Nginx project file location exists; Note that not specifying with root causes a 404 refresh issue! Use alias index index.html; try_files $uri $uri/ /medical-record-front/index.html; }}Copy the code

Alias if you don’t know, check the link, try_files or check the official website.

Finally I visit the path address: https://xxxx domain.com /medical-record-front/home

Refresh or specify access will not appear 404, see online configuration some 404 redirect back to the home page, I think can add, can not add.

conclusion

After the above configuration is completed, package the Vue project and throw the package to the server. Please refer to my access path. (The above operations are for personal projects, for your reference!) .