Vue 遇到的问题及解决办法总结

最新推荐文章于 2024-03-29 15:50:56 发布

checkio

最新推荐文章于 2024-03-29 15:50:56 发布

阅读量591

点赞数

分类专栏： Vue项目问题汇总

本文链接：https://blog.csdn.net/wpsz12345/article/details/115619015

版权

Vue项目问题汇总专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue 遇到的问题及解决办法总结

注: 以后慢慢填坑吧, 才想到汇总起来。

1. Vue 项目中 icon 小图标不显示

在 HTML 文件中添加了以下代码后，发现小图标还是没能呈现，应该是 Vue 项目缺少生成配置的问题

<head>
	<meta charset="utf-8">
	<meta name="author" content="author">
	<title>主页</title>
    <!-- 添加 favicon.ico 为网站图标(有在线.jpg, .png 文件转 .icon 工具) -->
    <link rel="Bookmark" type="image/x-icon" href="./src/assets/icon/favicon.ico" />
    <link rel="icon" type="image/x-icon" href="./src/assets/icon/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="./src/assets/icon/favicon.ico" />
</head>

解决办法：

在 webpack.dev.conf.js中新增一行 favicon 生成配置后，使用命令 npm run dev 重新启动 Vue 项目。

new HtmlWebpackPlugin({
      // 会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)
      filename: 'index.html',
      // 根据自己的指定的模板文件来生成特定的 html 文件
      template: 'index.html',
      // 指定 script 位置, 默认为 true --- html 文件底部
      inject: true,
    
      // 给生成的 html 文件生成一个 favicon, 属性值为 favicon 文件所在的路径。
      favicon:'./src/assets/icon/favicon.ico'
}),

2. Vue 项目地址栏路径去除 # 号

怎么去除 # 号？

const router = new VueRouter({
    // 
    mode:'history',
    routes: []
});

为什么要去除 # 号？

地址栏路径美观
在有些场景下是会破坏路由中的"#"（微信分享页面就会把"#"后边的内容处理掉，需要将带参的url作为一个参数传给后台，后台取不到#后面的东西）在后面需要开发微信支付、分享,授权登录等就暴露出了问题，所以就需要使用history模式

背后的原理:

Vue-router 中有 hash 模式和 history 模式。

Vue 的路由默认是 hash 模式，一般开发的单页应用的 URL 都会带有#号的 hash 模式，因为整个应用本身而言就只有一个 HTML，其他的都是通过 router 来渲染。

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。这两个方法在当前已有的 back、forward、go 的基础之上，提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由.

去除 # 号的操作正是 history 模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面 完成的

去除后带来的问题及解决方案：

问题一：在生产环境中，会报 404 错误。
- 官方文档解决方案： nginx 中如图配置

问题二：资源加载路径可能会出现问题( 资源没放在根目录下 )

base: '/history', // Vue官方也给出了解决方案
mode: 'history'

checkio

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 遇到的问题及解决办法总结

Vue 遇到的问题及解决办法总结注: 以后慢慢填坑吧, 才想到汇总起来。1. Vue 项目中 icon 小图标不显示在 HTML 文件中添加了以下代码后，发现小图标还是没能呈现，应该是 Vue 项目缺少生成配置的问题<head> <meta charset="utf-8"> <meta name="author" content="author"> <title>主页</title> <!-- 添加 favicon.ic
复制链接

扫一扫

专栏目录