从 vue-cli 更新到 Vite:TypeError:无法读取 null 的属性(读取“nextSibling”)

问题描述 投票:0回答:1

我已经按照这些教程更新了我的 Vue 3 项目以使用 Vite:

  1. Vue 学派:如何从 Vue CLI 迁移到 Vite
  2. 中:Vue-cli -> 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()]
});

我该如何解决这个问题?

vue.js vite vue-cli hot-reload
1个回答
0
投票

我发现了我的问题。我已将

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>
© www.soinside.com 2019 - 2024. All rights reserved.