Vue错误汇总三

1.defineProps is a compiler macro and no longer needs to be imported

【解决方案】
删除 defineProps 或 defineEmits 的导入语句即可，对象项目没有造成任何影响。

2.”exports is not defined” error in brand new Vue.js 3 project

这个就是很奇怪，在一个别人写的程序上运行，浏览器就会报这个错误。

【解决方案】
最后也没有解决，就是删除了 node_module 文件夹，重新安装了。

3.Error: Cannot find module ‘vue-loader-v16/package.json’

这是我安装运行之后，遇到的第一个问题。

解决方法也非常的奇怪，就是不能使用cnpm install ,而要使用原生的npm install 才能安装成功，如果已经运行过了 cnpm install, 那就要把node_module文件夹先删除，然后再执行 npm install 进行依赖安装

4.scoped设置的子元素样式不生效

当组件的样式设置了scoped之后，可以保证不污染其他的组件，但是如果想要改变子组件的样式，可能就不能生效了，比如想要重写组件内引用的element ui组件。

【解决方法】
使用深度作用选择器: >>>

5.Could not resolve entry module (demo.html).

这个问题非常的奇怪，这个问题是在 mars3d 的工程中进行pnpm打包的时候出现，一会是 echarts-gl、一会是lodash的配置，所以弄的我很头疼。

【解决方案】
后来我发现在 vite.config.js 中，配置了 build.input ，里面有一个 demo 入口，问题就出现在这里了。虽然有这个入口，但是我 根目录下没有这个东西，所以就会出现问题，删除这个地方就好了。

1
2
3
4
5
6
7
8
9

 build: {
    // 自定义底层的 Rollup 打包配置
    rollupOptions: {
        input: {
            index: path.resolve(__dirname, "index.html"),
            demo: path.resolve(__dirname, "demo.html")
        }
    }
},

6.router.beforeEach中的to.query获取不到参数

这个问题也是比较特别的，就是明明url中包含了token，但是有时候就是获取不到。就像下面的代码，有时候在使用 “index?token=0dsf” 这种地址的时候，还是会跳到 “没有token” 的情况。

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

router.beforeEach((to, from, next) => {
    let token = to.query.token;

    // 判断第三方跳转页面和首页是否携带token
    if ((to.name === 'd' && token != undefined) || (to.name === 'index' && token != undefined)) {
        if (token !== undefined) {
           console.log('验证token')
        } else {
            console.log('没有token');
            next('/login');
        }
    } else {
        console.log('获取另外的方法')
    }
});

7.Extraneous non-props attributes (sendNumber, successNumber) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

8.Vite打包之后，turf无法执行

在本地进行测试的时候，没有问题，但是到了打包部署的时候，就是执行不了，还报错了。比如我使用 turf 的point方法，结果就报错：”je.point is not a function“。我用的是 jeecg-boot 这个前端，弄的这个东西。

1

import { point, distance } from '@turf/turf';

【尝试方案】
(1) 我尝试了配置了 external: [‘turf’],然后安装了 plugin-node-resolve 和 plugin-commonjs，结果报错了：”default” is not exported by “node_modules/.pnpm/crypto-js@4.1.1/node_modules/crypto-js/enc-base64.js”, imported by “src/utils/cipher.ts”。也就是其他的文件就出现了问题。

1
2

pnpm add @rollup/plugin-node-resolve -D
pnpm add add @rollup/plugin-commonjs -D

(2) 尝试直接引入 turf

1

import * as turf from '@turf/turf';

【解决方案】
最后的解决方案，就是不用 import 引入 turf，使用 script 引入。

1
2
3
4

<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>

// 使用
turf.distance(turf.point([coordinates[0],coordinates[1]]), turf.point([center[0],center[1]]), { units: 'kilometers' }) * 1000;

9.reactive响应式无效

这个问题还真是奇怪，开始的代码还是可以运行的，后来就莫名其妙的不行了，重新执行响应式的时候，总是无法用了，界面就是不变化。

1
2
3
4
5
6
7

const waylinesData = reactive({
  data: [] as WaylineFile[],
  temp: 1,
})

// 响应式
waylinesData.data = [...waylinesData.data, ...res.data.list]

【解决方案】

1
2
3
4

import { reactive } from '@vue/reactivity'

// 改为
import { reactive} from 'vue'