我已经按照这些教程更新了我的 Vue 3 项目以使用 Vite:
该项目正在Vite上工作和运行。我遇到的问题是,当我更改组件然后保存文件时,我在浏览器控制台中收到此错误:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nextSibling')
页面也完全空白。
但是,重新加载后,错误就会消失,并且页面会显示更改。
我正在使用多个软件包,但我不知道它们是否(或哪个)是原因。这是我的
package.json
:
{
"name": "vue-project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"format": "prettier . --write"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.5.1",
"@vitejs/plugin-vue": "^5.0.4",
"@vueuse/core": "^10.9.0",
"chart.js": "^4.4.2",
"dayjs": "^1.11.10",
"firebase": "^10.9.0",
"firebase-admin": "^12.1.0",
"pinia": "^2.1.7",
"primeicons": "^6.0.1",
"primevue": "^3.50.0",
"register-service-worker": "^1.7.2",
"vite": "^5.2.11",
"vue": "^3.2.39",
"vue-chartjs": "^5.3.1",
"vue-router": "^4.0.3"
},
"devDependencies": {
"autoprefixer": "^10.4.18",
"postcss": "^8.4.37",
"prettier": "^2.8.8",
"tailwindcss": "^3.4.1"
}
}
这是我的
vite.config.mjs
:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { fileURLToPath } from "url";
import path from "path";
const filename = fileURLToPath(import.meta.url);
const pathSegments = path.dirname(filename);
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(pathSegments, "./src")
},
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"]
},
plugins: [vue()]
});
我该如何解决这个问题?
我发现了我的问题。我已将
script
标签添加到 index.html
文件的头部,而不是正文的底部。
这就是
index.html
现在的样子:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
href="/favicon.ico"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Vue project</title>
</head>
<body>
<div id="app"></div>
<script
type="module"
src="/src/main.js"
></script>
</body>
</html>