vue项目去掉地址中的#（PC,H5）

版权声明：有用请收藏，转载请注明出处！不做伸手党，谢谢！ https://blog.csdn.net/qq_42221334/article/details/89138239

vue项目携带一个#会对开发造成一定的影响：

微信H5支付的回调地址，不允许有#

微信三方登录回调地址，有#号时，接收不到code参数

App分享，处理特殊字符时，可能会对#进行编译

现在网站大多有三方登录，支付等功能，存在#，项目开发就存在很大的障碍。

有点影响美观

去#的原理

vue把#当做自己的根目录，静态资源，比如图片。

去掉#后，要采用相对路径去引用，如果图片引用是在js内，则要采用require()方法进行引用。

去#后台渲染，请参考vue官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html

去掉#方法：

1、首先判断产线项目是否放在域名根目录下

在router/index.js文件中，添加history模式

如果项目不在根目录下，比如产线项目根目录为 http://www.baidu.com/project-name/

Vue.use(Router)

export default new Router({
  mode:'history',
  base: '/project-name/', //如果项目根目录不为域名，则添加该行
  routes: [
    { //首页
      path: '/',
      name: 'index',
      component: index
    },

2、修改config/index.js文件

build: {
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/project-name/', //添加根目录，如果域名为根目录，则为 '/'
}

去掉#，对项目的根目录造成影响，这是不可避免的，再次强调，确保静态资源文件路径正确。

重要：配置完，需要后端配合修改 参考vue官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html

最后

Apache，Nginx等服务器部署vue项目请参考另一篇博客：

https://blog.csdn.net/bocongbo/article/details/83957206