Vue 去除路径中的＃号

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

众所周知，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
}

Url再也没有＃了，多完美

总结

以上所述是小编给大家介绍的Vue 去除路径中的＃号，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • vue cli使用绝对路径引用图片问题的解决
  • 关于Vue背景图打包之后访问路径错误问题的解决
  • vue-cli中打包图片路径错误的解决方法
  • 关于vue.js发布后路径引用的问题解决
  • Vue.js中的图片引用路径的方式
赞 (0)

相关推荐

  • 关于Vue背景图打包之后访问路径错误问题的解决

    案例环境 通过vue-cli脚手架创建的vue项目 在项目打包的时候遇到了背景图片路径出错的问题,经过谷歌一番,发现是在配置的时候对图片的限制大小过小造成的 首先,出错点在url-loader上面. // url-loader配置 // build/webpck.base.conf.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsP

  • vue-cli中打包图片路径错误的解决方法

    vue-cli中打包图片路径错误的解决方法

    最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如

  • Vue.js中的图片引用路径的方式

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png

  • vue cli使用绝对路径引用图片问题的解决

    前言 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档 很全面的. Vue是近两年来比较火的一个前端框架(渐进式框架吧),本文将给大家详细介绍vue cli使用绝对路径引用图片问题的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看吧. 正文: 在页面中使用绝对路径可通过在js中用 require() 引入 data (){ return { sr

  • 关于vue.js发布后路径引用的问题解决

    关于vue.js发布后路径引用的问题解决

    本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 在发布到iis目录下时候,如果放在网站的根目录下的时候,是不会有什么问题的 但是一旦放在了非根目录的其他文件夹里面,这时候index.html里引用的js和css文件路径都会找不到 错误如下 打开index.html文件发现里面引用的文件路径不对 这里只需要更改config/index.js配置就可以了 更改后的配置 这里也视当前环境的具体环境而定. 如果你也遇到这样

  • Vue 去除路径中的＃号

    Vue 去除路径中的＃号

    在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋. 众所周知,vue-router有两种模式,hash模式和history模式. 带#的则是hash模式. 将router中的mode设置为history就可以了 接下来有个问题,界面一刷新,就变404了!!!! 网上搜了下,需要对后端环境进行一个配置. 这里只列举nginx的配置,其他的配置点击这里去官网看 先配置config/index.js 修改assetsPublicPath为根目录 module.exports = { bui

  • Angular2+如何去除url中的#号详解

    前言 本文中主要介绍了关于Angular2+中去除url中#号的相关内容,这是最近在工作中遇到的一个问题,觉着有必要给大家分享下,下面话不多说了,来一起看看详细的介绍吧. 1. 为什么要去除? Angular官方指出:如果没有足够使用hash风格(#)的理由,还是尽量使用HTML5模式的路由风格: 如果配置了hash风格,在微信支付或是Angular的深路径依然会出404的问题: 当你需要使用GA等工具时,由于无法获取#号后的URL,导致每次路由切换都给其发送一个路径: '#'有点丑. 2. 怎

  • Vue开发环境中修改端口号的实现方法

    Vue开发环境中修改端口号 如上图所示,在开发环境中,8080便是端口号,这也是使用Vue脚手架创建的项目运行时的默认的端口. 1.Vue 2.x config文件夹中有一个index.js其中部分内容如下,port即为端口号,在这里更改即可. module.exports = { dev: { env: require('./dev.env'), port: 8080, // 端口号 assetsSubDirectory: 'static', assetsPublicPath: '/', pr

  • 在thinkphp5.0路径中实现去除index.php的方式

    昨天安装环境后发现,路径"/index/index/index"无法访问,经查验存在index模块,index控制器与index操作. 虽然在路径前加入'/index.php'可以访问. 经过多方查找最后整理如下: 一.必须要在public也就是根目录下有存在'.htaccess'文件 二.文件内容如下 <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine On RewriteC

  • vscode中Vue别名路径提示的实现

    开发场景 当使用 Vue 框架进行项目开发时,在 vue.config.js 中配置好了路径别名后,到其他页面引入组件.引入 css .引入静态文件路径时,使用路径别名不会智能提示路径.虽然在 vscode 中安装了Path Intellisense插件,但是并无作用.这样容易出现路径拼写错误的低能问题,同时也会造成开发效率降低 解决方案 在项目 package.json 所在同级目录下创建文件 jsconfig.json, 来解决别名路径不提示的问题.(配置完保存文件后需要重启编辑器才能生效.

  • vue 解决data中定义图片相对路径页面不显示的问题

    vue在data中定义图片相对路径: data() { return { active: 1, icon: { active: "../assets/images/home-selected.png", inactive: "../assets/images/home.png" } }; } 页面使用vant的标签栏自定义图标: <van-tabbar v-model="active"> <van-tabbar-item inf

  • vue+vuecli+webpack中使用mockjs模拟后端数据的示例

    vue+vuecli+webpack中使用mockjs模拟后端数据的示例

    前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTML模板生成模拟数据. 拦截并模拟 ajax 请求. 语法规范 Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) 数据模板定义规范 DTD

  • python去除文件中空格、Tab及回车的方法

    本文实例讲述了python去除文件中空格.Tab及回车的方法.分享给大家供大家参考,具体如下: 在最近的开发工作中,为了应付比赛赶进度,服务端的json文件都是人工写的,写完之后发现格式都是十分规整,易于人阅读的json,但是客户端请求不需要那些为了格式而在json里面添加的空格.tab.回车等等没用的字符,遂用python写一脚本,去除文件中的空格.回车.换行. 原json文件: { "amount" : "2", "content" : [

  • Vue.js 实现微信公众号菜单编辑器功能(一)

    学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&g

  • 深入浅出vue图片路径的实现

    基础 1.webpack打包本质 本质就是nodejs去执行webpack脚本,由webpack脚本对项目各个文件进行必要的编译(通俗而言即字符串处理),再输出到某个目录 2.import from 和require webpack相关脚本中的require和我们前端js文件中使用的require函数不是一回事,它的require是nodejs的关键字. 而前端js文件中,使用到的require在编译时相当于一个webpack定义的关键字,运行时则是webpack提供的一个函数.主要能力有:完成

随机推荐