vue路由history模式_如何去除vue项目中的#

在使用vue-cli搭建的环境中，浏览器上URL地址中是存在'#'的，这是由于vue-router 默认 hash 模式，不难发现#的出现真的很丑陋。官网给出了如何使用history模式，例如:

const router = new VueRouter({
  mode: 'history',
})

 

对于VUE的router[mode: history]模式在开发的时候，一般都不出问题。是因为开发时用的服务器为node，Dev环境中自然已配置好了。但对于放到nginx下运行的时候，自然还会有其他注意的地方。总结如下：

在nginx里配置了以下配置后， 可能首页没有问题，链接也没有问题，但在点击刷新后，页面就无法显示了（404）

 

location /{
        root   /data/nginx/html;
        index  index.html index.htm;
}

为了解决404，需要通过以下两种方式:

方式一

  location /{

        root   /data/nginx/html;
        index  index.html index.htm;

        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }

 

方式三

location / {
  try_files $uri $uri/ /index.html;
}

或者使用官方try_files 来指定index.html

此外，如果VUE应用没有发布在域名的目录根下，比如[http://xxx.com/wx/]。那么除了上述配置：

 location /wx{
        root   /data/nginx/html;
        index  index.html index.htm;
        #error_page 404 /wx/index.html;
        if (!-e $request_filename) {
            rewrite ^/(.*) /wx/index.html last;
            break;
        }
    }

还应该在VUE项目里把每个路径加上[/wx]这一段(或者指定base: '/wx/')，要不页面会显示为空白。

 

 

 

 

 

实际配置案例：

config/index.js

'use strict'


const path = require('path')

const baseUrl = 'http://localhost:8080/sct.kb.service';



module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/cloudServiceAction.do': {
        target: baseUrl,
        changeOrigin: true
      },
      '/cloudServicePcAction.do': {
        target: baseUrl,
        changeOrigin: true
      }
    },

    host: '0.0.0.0',
    port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: false,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    useEslint: false,
    showEslintErrorsInOverlay: false,
    devtool: '#cheap-source-map',
    cacheBusting: true,
    cssSourceMap: false,
  },



  build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/sct.kb/', // If you are deployed on the root path, please use '/'
    productionSourceMap: false,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

说明：

1)配置assetsPublicPath: '/sct.kb/',
2)assetsSubDirectory: 'static',

 

路由配置

export default new Router({
  mode: 'history',                    // require service support
  base: 'sct.kb',                     //与assetsPublicPath: '/sct.kb/'
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

说明：

    1）配置base: 'sct.kb',                     //与assetsPublicPath: '/sct.kb/'

 

 

 

服务端nginx的配置

        location / {
            root   /var/www/html;
            index  index.html index.htm;
            try_files $uri $uri/ /sct.kb/index.html;
        }

说明：

    1）加上配置 try_files $uri $uri/ /sct.kb/index.html;

 

 

 

 

 

 

==============================
QQ群：143522604
群里有相关资源
欢迎和大家一起学习、交流、提升！
==============================