vue Router Console相关

Question

package.json
{
  "name": "vue_web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "6.5.2",
    "@fortawesome/free-solid-svg-icons": "6.5.2",
    "@fortawesome/vue-fontawesome": "3.0.6",
    "@mdi/font": "7.4.47",
    "@vue/compiler-sfc": "3.2.13",
    "axios": "1.6.8",
    "crypto-js": "4.2.0",
    "jquery": "3.7.1",
    "process": "0.11.10",
    "register-service-worker": "^1.7.2",
    "sweetalert": "2.1.2",
    "vue": "3.2.13",
    "vue-router": "4.3.2",
    "vuetify": "^3.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@babel/plugin-proposal-optional-chaining": "7.21.0",
    "@babel/plugin-syntax-dynamic-import": "7.8.3",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "5.0.8",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

/router/index.js
import { createRouter, createWebHashHistory } from "vue-router";
import Login from "../Pages/Erp/MuzinLogin.vue";
import Memo from "../Pages/Erp/Memo/ObtainMemo.vue";

const routes = [
  {
    path: "/",
    name: "app",
    redirect: { name: "mainPage" },
  },
  {
    path: "/main",
    name: "mainPage",
    component: () => import("../Pages/MainPage.vue"),
  },
  {
    path: "/erp/testLogin",
    name: "muzinLogin",
    component: Login,
  },
  {
    path: "/erp/memo/obtainMemo",
    name: "obtainMemo",
    component: Memo,
  },
];

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes,
});

export default router;

main.js
import { createApp } from "vue";
import vuetify from "./plugins/vuetify";
import router from "./router";
import App from "./App.vue";
import jquery from "jquery";
import "./registerServiceWorker";
import axios from "axios";
import Config from "./plugins/user.js";
const app = createApp(App);
window.$ = jquery;
window.jQuery = jquery;

// 전역 속성으로 axios 설정

app.config.globalProperties.$http = axios;
app.config.globalProperties.$Config = Config;

// 라우터 사용
app.use(vuetify);
app.use(router);
app.mount("#app");
router.isReady().then(() => {
  console.log("Initial route name:", router.currentRoute.value.name);
});

ThisSidebar.vue
<template>
    <v-app>
     <v-navigation-drawer
        v-model="drawer"
        :rail="rail"
        permanent
        @click="rail = false"
      >
        <v-list-item
          title="John Leider"
          nav
        >
          <template v-slot:append>
            <v-btn
              icon="mdi-chevron-left"
              variant="text"
              @click.stop="rail = !rail"
            ></v-btn>
          </template>
        </v-list-item>

        <v-divider></v-divider>

        <v-list density="compact" nav>
          <v-list-item
    v-for="item in filteredMenuItems"
    :key="item.title"
    :to="item.route"
    :title="item.title"
    :prepend-icon="item.icon">
</v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-app>
</template>

<script>
export default {
    data() {
        return {
            rail: true,
            drawer: true,
            menuItems: [
                { title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/erp/memo/obtainMemo', permission: 'admin' },
                { title: 'Profile', icon: 'mdi-account', route: '/erp/memo/obtainMemo', permission: 'public' },
                // 추가 메뉴 아이템
            ],
            auth: 'admin', // 예시 사용자 권한
        };
    },
    mounted() {
        this.auth = sessionStorage.getItem('auth') || 'public';
    },
    computed: {
      filteredMenuItems() {
          console.log(this.menuItems.filter(item => item.permission === this.auth)); // 콘솔에 출력하여 데이터 확인
          return this.menuItems.filter(item => item.permission === this.auth);
      },
  },
    methods: {
        // goTo(route) {
        //     this.$router.push(route);
        // },
    },
};
</script>

ObtainMemo.vue
<template>
    <this-sidebar></this-sidebar>
  <div>
    <div>sss</div>
  </div>
</template>

<script>
// import swal from 'sweetalert';
import ThisSidebar from '../../../components/ThisSidebar.vue'
export default {
  name: 'ObtainMemo',
  components: {
    ThisSidebar,
  },
  data: () => ({
    userId: '',
  }),
  mounted() {
    this.userId = sessionStorage.getItem('id');
  },
  methods:{
  },
  watch: {
        userId(){
            if (!this.userId) {
                // this.movePage('Main');
            }
        },
    }
}
</script>

对不起..这是我第一次写，但是当我输入源代码时总是出现错误..请理解我将其作为图片上传。

自从运行该项目并运行 Page Chrome 以来，我没有做过任何其他事情。但我不断收到图片中的警告。 我已经在gpt 4.0版本中提问了3天，但是即使我用收到的修改修复它也无法修复它..我向网站寻求帮助..

Answer 1

认为您的问题基本上是 vuetify 导入错误，只要正确的路由器定义路径就不应该在控制台中导致这些警告，而且来自丢失路由器路径的警告也不应该真正导致应用程序“无法加载”也。最好从最简单的情况开始，只在事情仍在运行时添加代码，并且如果您对 main.js 或 router.js 或其他“顶级文件”进行更改，请确保使用 npm 重建并完全停止/重新启动服务“ CLI 未观看。

https://stackblitz.com/edit/vitejs-vite-dbrzvu?file=src%2Fmain.js

我认为主要的事情是：

import { createVuetify } from 'vuetify';
import 'vuetify/styles';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

const vuetify = createVuetify({
  components,
  directives,
});
app.use(vuetify);

参见 https://vuetifyjs.com/en/getting-started/installation/#existing-projects

对于 ChatGPT，它可以擅长某些编码任务，但在管理各种库的哪些版本实际上彼此兼容方面特别糟糕，因此您需要检查库文档中的这些内容，并确保告诉 ChatGPT坚持使用您知道的版本，这些版本经过测试可以一起工作并且在训练数据中（基本上是一年前或更长时间之前它应该已经“知道”的任何内容）。