How to use Vue to remove the # sign from the path

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

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:

How to use vue source code to parse the event mechanism

How to operate JS to obtain the city and geographical location of the user

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