How to remove path # number in Vue

This time I will show you how to remove the path # number in Vue. What are the precautions for Vue to remove the path # number? 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:

Perfect processing of ajax requests and axios packages in vue

Detailed explanation of element traversal implemented by Element Traversal

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