vue2 和 vue3 router 更改 hash 模式

前言

项目部署到线上之后,发现刷新页面之后会 404,所以我们需要将 router 的模式从 history 换成 hash

项目采用了 vue3+ts 框架

vue2

history

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

hash

const router = new VueRouter({
mode: 'hash', //或者把这句话注释,默认就是hash
routes: [...]
})

vue3

history

// 引入 createWebHistory
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});

hash

// 引入 createWebHashHistory
import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
history: createWebHashHistory(),
routes,
});

vue 遮罩层禁止滚动

在遮罩层 div 添加 @touchmove.prevent @mousewheel.prevent

pc 端禁止遮罩层滚动

//停止页面滚动
stopMove(){
let m =function(e){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove", m, false);//禁止页面滑动
},

//开启页面滚动
Move(){
let m =function(e){e.preventDefault();};
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove", m, true);
}

Syntax Error: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (102)

遇到问题:

  1. Syntax Error: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (102)
  2. Node Sass 7.0.0 版本与^4.0.0 不兼容
// 解决方法
使用sass 卸载node-sass
1. 使用npm
// 卸载
npm uninstall node-sass
// 安装sass
npm i -D sass
2. 使用yarn
// 卸载
yarn remove node-sass
// 安装sass
yarn add -D sass

在使用 yarn 安装依赖包时报错,提示信息:error An unexpected error occurred: “https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz: connect ETIMEDOUT 104.16.19.35:443”

解决方案:

运行命令,把资源地址设置成 npm 淘宝源

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist