Vue method to remove # sign from path

Everyone knows that vue-router has two modes, hash mode and history mode, and the one with # is hash mode. Next, I bring you a solution for Vue to remove the # sign in the path. Friends who are interested should take a look.

During the development process, I found that the path has a /#/ sign, and I also went to It won't fall off, it's 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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the encapsulation of Vue2.0 multi-Tab switching components

Write using ES6 classes to imitate Vue An example of two-way binding

Based on cropper.js to encapsulate vue to implement the function of online image cropping component

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