Vue-router Sets the history mode

Vue projects are often paired with the vue-Router official route manager, which is deeply integrated with the core of Vue.js, making building single-page applications a piece of cake. The Vue-Router uses the hash mode of the URL to simulate a complete URL. Therefore, when the URL changes, the page is not reloaded. Instead, it displays the corresponding component based on the hash.

But using the default hash mode, the browser URL will have a #, which is different from the previous website address, and may be unaccustomed to most people, and even ugly.

To remove the # from the address, you can simply change the history mode to another mode on the Vue-router.

When you use the history mode, the URL will change back to normal again good address, as with most web address, for example: http://zhengchang.com/name/id

However, the pitfall of this pattern is that not only does the front-end developer need to change the pattern to history mode, but the backend needs to be configured accordingly. If the backend is not configured correctly, a 404 will appear when you access your project address, which is even worse.

Examples of common backend configurations are given:

  • Apache

  • nginx

  • The original Node. Js

  • Internet Information Services (IIS)

Since my project back-end service is IIS, I would like to share the configuration of IIS.

IIS back-end configuration

First, the front end changes the Vue-Router mode to history mode, and when the development is complete and packaged, the files are deployed to the site. There will be configuration files at the root of the site, which will be clear to the back-end people, and the front-end development only needs to tell the back-end people how to write the configuration files with the # removed.

Create a web.config file in the root directory of your site, as shown in the figure above. The key is the code in the rewrite tag:

  • The rule tag represents a defined rule.

  • Match tag: Whatever your rule requires, the URL attribute content is required (regular expression).

  • The action tag: the type attribute is Rewrite and the URL attribute is the target. If the re of the URL attribute in the match tag is met, this configuration is performed (the address that matches the url of the match tag is rewritten as the address of the URL attribute in the Action tag).

This configuration is just like a redirection, which redirects the address that meets your requirements to the address you want. Here is how IIS is configured in my project:

My requirement is that, except for addresses beginning with “API” or “token”, all the addresses are redirected to “/”. Because my interface address starts with “API” and “token”, so the interface address cannot be changed.

The server then sets the default display directory index.html, which is the HTML file generated by the front end after packaging. The site opens the HTML file, executes the script, and displays the component content according to your routing Settings. The # is replaced in the browser address.

There is also a rule tag that configures my image path.

In the development environment, images are categorized into different folders according to their corresponding components. For example, the path of the banner image in the home component is assets/home/banner.png.

After my project is packaged, I generate index. HTML and static folders. Js, CSS, img and other folders are in static. All the images are placed under “/static/img/”, and the image path is automatically changed to “./static/img/ “.

I don’t want the image path to be redirected to “/”, so the rule is: redirection “./static/img/name.png “to” /static/img/name.png “.

The most difficult part of the configuration is probably the regular expression. Configure different regular expressions according to different needs, and you’re done!