How to remove # from the path

This time I will show you how to remove the # number in the path, and what are the precautions for removing the # number in the path. The following is a practical case, let's take a look.

During the development process, I found that the path contains the /#/ mark, and it cannot be removed, which is very ugly.

As we all know, vue-router has two modes, hash mode and history mode.

With # is the hash mode.

Just set the mode in the router to history

Then there is a problem. As soon as the interface is refreshed, it changes to 404! ! ! !

After searching online, I need to configure the back-end environment.

Only the nginx configuration is listed here. For other configurations, click here to go to the official website.

Configure config/index.js first

Modify assetsPublicPath to the root directory

module.exports = {
  build: {
      env: require('./prod.env'),
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',   // hash 模式会默认的在此处 添加为 assetsPublicPath: './'
      productionSourceMap: true,
      ...
    }
}

Then configure nignx

server {
    listen 0.0.0.0:12345;
    location / {
        root /home/我的应用跟目录;
        try_files $uri $uri/ /index.html =404;  // 这个是重点
    }
    error_page 404 /index.html
}

Url no longer has #, how perfect

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Use classes in ES6 to imitate Vue to make two-way binding

Analysis of Vue binding issues

The above is the detailed content of How to remove # from the path. For more information, please follow other related articles on the PHP Chinese website!