vue相关问题合集

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