Vue错误汇总

1.NavigationDuplicated

在全局路由进行跳转时出现了这个错误

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/**
 * 全局路由钩子
 */
router.beforeEach((to, from, next) => {
  let id=utils.getQueryString("id");
  if(id&&to.name!='Xinxiqueren'){
    store.commit('getjobid',id);
    router.push({path:'/Xinxiqueren'});
    next(false)
  }else{
    next()
  }
})

解决方法：
(1) 又说是在跳转时进行捕获(使用router.push时，请进行catch处理，将这个错误捕获。)

1
2
3
4
5
6
7
8
9
10
11

router.beforeEach((to, from, next) => {
  let id=utils.getQueryString("id");
  if(id&&!store.state.jobid){
    store.commit('getjobid',id);
    router.push({path:'/Xinxiqueren',query:{'zhiweiid':id}}).catch(err => {
      next()
    });
  }else{
    next()
  }
})

2.Invalid Host header

使用vue cli 3.x之后，我本地已经讲hosts中的127.0.0.1指向了bibichuan.github.io了，访问自定义的域名：bibichuan.github.io，出现了问题：Invalid Host header。

1
2
3
4
5
6
7
8
9

var path = require('path')
const webpack = require('webpack');

module.exports = {
  devServer: {
    port:80,
    disableHostCheck: true
  }
}

参考文章中说：这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname 不是配置内的，将中断访问。

3.打包后页面空白

打包后出现空白，可以从下面两个方面入手
(1) vue.config.js 配置相对目录

1
2
3
4
5
6
7
8

module.exports = {
  assetsDir:"./",
  publicPath:"./",
  devServer: {
    port:80,
    disableHostCheck: true
  }
}

(2) 关闭route的history模式

(3) 有一种情况就是在vite 中配置了 envDir: ‘./env’, // 环境目录，所以导致 import.meta.env.VITE_BASE_URL 出不来。

1
2
3
4

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_URL),
  routes
})

也就是说你在根目录下创建了 .env .env.production .env.development 三个文件，使用了 envDir 之后就找不到相关的配置了。

4.error and 0 warnings potentially fixable with the --fix option.

在vue进行打包的时候，有时候会出错，有时候不会出错。其实这个问题，主要就是使用了eslint进行代码检查造成的。

我引入了外部的js文件，只需要在文件的开头写上一句话就可以了。

1

/* eslint-disable */ 

5.store为空

我自定义了一个request中，想要直接使用store中的内容，但是出现了store输出为空的情况,但是像在server.interceptors.request.use中使用就不为空的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import axios from "axios"
import Qs from "qs"
import store from '../store'
console.log(store); // 输出为空

//请求拦截
server.interceptors.request.use((config) => {
    console.log(store); // 但是这里输出不为空
    // url 改造
    let url=config.url;
    // 如果url为数据请求api，则加入相应的dbname
    if(url.indexOf("phemsjava")>=0||url.indexOf("bigdata")>=0){
        config.url=dbname+"/"+config.url;
    }

    // 修改默认的Content-type
    if (!config.ContentType||config.ContentType != "default") {
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        // 序列化参数
        config.data = Qs.stringify(config.data, { arrayFormat: 'brackets' })
    }

    if (config.method == "get") {
        config.params = { ...config.data };
    }

    return config;
    // config.header["content-type"]="application/json"  
}, (err) => {
    return Promise.reject(err);
})

至于原因吗，我觉得是加载的时机问题，当我引入request.js的时候，还没有引入store还没有被创建，我只能这么理解了。

5.This dependency was not found:* core-js/fn/promise in ./src/store/index.js

在vue中使用Promise的时候，爆出了这个粗错误：

我只是使用了return返回了一个Promise，然后就出现依赖不满足，但是查询同样的问题，似乎没有相关的信息。

1
2
3
4
5
6
7

async getUserConfig(context){
     return new Promise((resolve,reject)=>{
       resolve();
     }).then(res=>{
       console.log(res);
     })
}

但是按提示，执行：

1

npm install --save core-js/fn/promise

又会出现新的问题：

问题出现了在使用vscode的时候，不知道什么时候，文件的头部出现了：import { reject, resolve } from ‘core-js/fn/promise’这句话，删掉就好了。

6.Cannot find module ‘@babel/helper-regex’

在我使用macos开发vue应用运行：npm run serve 的时候，出现了这个问题，在windows上开发就没有这个问题。

但是我执行了安装@babel/helper-regex的命令之后，再次运行 npm run,还是出现模块不存在的问题。

1

npm install --save-dev @babel/helper-regex

7.caniuse-lite is outdated.

今天在mac上打包运行vue的程序的时候出现了这个问题，不知道是因为什么。

8.The stylesheet https://phems.proheng.net/css/app.1621226575669.css was not loaded because its MIME type, “text/html”, is not “text/css”

今天部署网站的时候，突然出现了这个问题，无法加载css文件，简直非常的纳闷，服务器什么都没有动，昨天还好好的，今天突然就无法浏览了网站，这是什么问题呢？

在我查看生成的index.html中的link标签，发现没有type=”text/css” 这个属性。

1
2

<link href=css/chunk-02316de6.d6a34d41.css rel=prefetch>
<link href=css/chunk-17d12024.49e9beee.css rel=prefetch>

更为郁闷的是，火狐浏览器和谷歌浏览器返回的内容竟然不一样。谷歌浏览器可以正常的返回并解析正确的文件类型，但是火狐浏览器就是无法解析，并且出现了:NS_BINDING_ABORTED错误。

nginx无法识别css和图像：资源被解释为样式表，但使用MIME类型text / html进行传输 我觉得增加类型传输比较有用,就像下面的一样

1
2
3
4
5
6

location ~ \.css {
    add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
} 

9.Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88)

这个问题在windows上没有出现，但是在MasOS上出现了，卸载重装了node-sass之后，可能会出现新的问题：Node Sass version 6.0.0 is incompatible with ^4.0.0，只能卸载node-sass,安装指定版本

1
2
3
4

#先卸载node-sass
npm uninstall node-sass -D
#再重装4.x版本的node-sass
npm install node-sass@4.14.1 -D