成都网站建设设计

将想法与焦点和您一起共享

Vue如何去除路径中的#号

本篇内容主要讲解“Vue如何去除路径中的#号”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue如何去除路径中的#号”吧!

成都创新互联公司专业为企业提供永康网站建设、永康做网站、永康网站设计、永康网站制作等企业网站建设、网页设计与制作、永康企业网站模板建站服务,10多年永康做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋。

众所周知,vue-router有两种模式,hash模式和history模式。

带#的则是hash模式。

将router中的mode设置为history就可以了

接下来有个问题,界面一刷新,就变404了!

网上搜了下,需要对后端环境进行一个配置。

这里只列举nginx的配置,其他的配置去官网看

先配置config/index.js

修改assetsPublicPath为根目录

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,
      ...
    }
}

然后配置nignx

server {
    listen 0.0.0.0:12345;
    location / {
        root /home/我的应用跟目录;
        try_files $uri $uri/ /index.html =404;  // 这个是重点
    }
    error_page 404 /index.html
}

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

到此,相信大家对“Vue如何去除路径中的#号”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前名称:Vue如何去除路径中的#号
链接分享:http://chengdu.cdxwcx.cn/article/jghici.html