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 中如图配置
- 官方文档解决方案: nginx 中如图配置
问题二: 资源加载路径可能会出现问题( 资源没放在根目录下 )
base: '/history', // Vue官方也给出了解决方案
mode: 'history'