vue-cli、vuex、前端报错

vue-cli前端问题
本人写了一个前后端分离的项目，前端用webstorm开发，不小心把node_modules文件删除了，但是package.json和package-lock.json都还在，所以用webstorm右下角弹出的提示框里的npm install按钮下载完了依赖，下载结果：

D:\nodejs\npm.cmd install
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibili
ty table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated acorn-dynamic-import@2.0.2: This is probably built in to whatever tool you're using. If you still need it... idk
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies  
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated consolidate@0.14.5: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemen
ted. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and r
elease changelog
npm WARN deprecated html-webpack-plugin@2.30.1: out of support
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated shvl@2.0.3: older versions vulnerable to prototype pollution
npm WARN deprecated vuex-persistedstate@4.1.0: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is
 known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated axios@0.19.2: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pul
l/3410
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.     
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because o
f the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions 
have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 1315 packages in 15s

进程已结束,退出代码0

运行结果

D:\nodejs\npm.cmd run dev

> element_users@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:16452) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
 19% building modules 82/121 modules 39 active ...rc\components\admin\carouseladmin.vue{ parser: "babylon" } is deprecated; we now treat it as {
 parser: "babel" }.
 95% emitting                           

 WARNING  Compiled with 1 warnings                                                                                                      16:28:58

 warning  in ./src/components/common/Index.vue

(Emitted value instead of an instance of Error) <el-col v-for="item in currentDate">: component lists rendered with v-for should have explicit k
eys. See https://v2.vuejs.org/v2/guide/list.html#key for more info.

 @ ./src/components/common/Index.vue 11:0-367
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

我在这个vue-cli中使用了vuex而且安装了对应版本的vuex依赖，使前端元素按照vuex中的state的属性来控制登录、退出登录、发布失物招领信息这三个按钮的显示，结果运行项目时没能生效（误删node_modules之前这个功能是成功实现了的），网站首页的component是成功渲染的，使用到的elementUI组件也成功渲染了，说明路由器没问题，不正常的是：登录、退出登录、发布失物招领信息这三个按钮都一起显示了，如果没登录用户的话是不会显示“退出登录”和“发布失物招领信息”按钮的，我在F12里看了vuex的state的属性都为null和false（false是项目启动时我设置的默认值），这样的话应该是只会显示登录按钮不会显示后面那两个的

我点击登录按钮，下方component没有渲染出登录页的内容，浏览器控制台报错如下图（用其他浏览器也是这些报错）：

讯飞星火分析这些报错：

这个警告信息表示在 Vue.js 应用程序中，有一些属性或方法没有在组件实例上定义，但在渲染过程中被引用。为了解决这个问题，你需要确保这些属性或方法是响应式的，可以在 data 选项中定义，或者对于基于类的组件，通过初始化属性来定义。

具体来说，你需要检查 loginUser、rules 和 login 这三个属性或方法是否已经在组件的 data 选项中定义，或者在 Vue 实例的 methods 中定义。如果没有定义，你需要添加相应的定义。

可是我怎么改都不行，登录页还是报上面那些错误
下面是登录页的代码：

<script setup>
import api from '@/api/user';
export default {
  data() {
    var checkUsername = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('用户名不能为空'));
      }else{
        callback();
      }
    };

    var validatePass = (rule, value, callback) => {//value为输入的内容
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.loginUser.checkPass !== '') {
          this.$refs.loginUser.validateField('checkPass');
        }
        callback();
      }
    };

    return {
      loginUser: {
        password: '',
        username: ''
      },
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        username: [
          { validator: checkUsername, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      //登录
      api.login(this.loginUser).then(response=>{
        if(response.data.code===200){//登录成功，弹出消息提示，先跳转到首页：App.vue设置登录按钮的内容，再跳转到首页：List
          const isAdmin = response.data.data.isAdmin;
          this.$message.success(response.data.message);
          if (isAdmin===1) {//判断是管理员登录还是普通用户登录
            this.$store.commit('show_adminpage',response.data.data);//保存用户姓名和id，改动按钮显示
          }else {
            this.$store.commit('show_userpage',response.data.data);//保存用户姓名和id，改动按钮显示
          }
          this.$router.push('/index');
        }else{//登录失败，弹出消息提示
          console.log("登录失败...");
          this.$message.error(response.data.message);
        }
      })
    },
  }
}
</script>

<template>
  <el-container>
    <el-aside width="400px"></el-aside>
    <el-main>
      <div align="center">
        <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;登&nbsp;&nbsp;录</b>
        <br>
        <br>
        <br>
      </div>
      <el-form :model="loginUser" status-icon :rules="rules" ref="loginUser" label-width="100px"  class="demo-loginUser" >
        <el-form-item label="用户名" prop="username" >
          <el-input v-model.number="loginUser.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="loginUser.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginUser')">登录</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-link type="primary" href="#/regist">还没有账号？点此注册</el-link>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<style scoped>
div{
  width: 400px;
}
b{
  font-size: 35px;
}
</style>

package.json代码：

{
  "name": "element_users",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "chenyn-java <chenyn@zparkhr.com.cn>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "all": "^0.0.0",
    "axios": "^0.19.2",
    "element-ui": "^2.13.1",
    "js-cookie": "^3.0.5",
    "moment": "^2.30.1",
    "vue": "^2.5.2",
    "vue-ls": "^4.2.0",
    "vue-router": "^3.6.5",
    "vuex": "^3.5.1",
    "vuex-persist": "^3.1.3",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

我怀疑是哪个vue的依赖没弄对，因为之前页面都能渲染，没出过问题，应该不是代码问题，帮帮我谢谢

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

5条回答默认最新

专家-郭老师 Java领域新星创作者 2024-03-08 16:53

关注

🌈🌈🌈参考通义千问和郭老师的小迷弟雅思莫了-编写提供🌈🌈🌈
您可以参考如下，如果回答的不正确，及时评论区回复我，我会根据你错误描述追加回复，直到您满意为止。

从你给出的错误提示看，问题出现在当前模块（添加了 <script setup> 生命的 SFC 中）未能正确地识别到对应属性。在 Vue.js 3 中，<script setup> 提供了更加简洁的复合式 API 写法，可能存在某些细节的语法差异。
下面是两个可能的解决方法：
在 <script> 标签中直接使用 setup 方法
你可以选择不使用 <script setup> 写法，而是在普通的 <script> 中使用 setup 方法来定义你的组件。例如，setup 可以返回一个响应式对象，其中的属性就可以在模板中调用：
<script>
import { ref } from 'vue';
import api from '@/api/user';
export default {
  setup() {
    // 定义并返回你的响应式引用或者计算属性
    const loginUser = ref({
      username: '',
      password: '',
    });
    // 你其他的逻辑
    // 确保这些都可以被返回
    const rules = ...;
    const submitForm = ...;
    return {
      loginUser,
      rules,
      submitForm
    };
  },
}
</script>

这里的关键是，你需要返回你希望在模板中使用的所有属性和方法。
在 <script setup> 中明确返回你需要的属性
在 <script setup> 中，你虽然可以像在 <script> 中的 setup() 函数那样返回你需要的属性，但在某些情况下，你可能需要更明确地指明这些属性。你可以尝试使用 defineProps 和 defineEmits 函数来声明属性和自定义事件：
<script setup>
import { ref } from 'vue';
import api from '@/api/user';

// 定义属性和事件
const props = defineProps(['loginUser', 'rules', 'submitForm']);

const loginUser = props.loginUser || ref({
  username: '',
  password: '',
});

// 你的其他代码
</script>

在你的代码中，问题可能出现在你移除了 node_modules 文件夹并重新安装了依赖。如果你在重新安装依赖后出现了问题，可能是你在之前的版本中使用了与新版本不兼容的语法（例如 Vue.js 3 的 <script setup>）。你可能需要明确你的 Vue.js 版本，并确保你所有的依赖都和这个版本兼容。
另一种可能是，如果你的 Vue CLI 项目使用了某种特殊配置或者插件，可能会影响模块解析。你可能需要查看你的项目配置，比如 vue.config.js 或者 webpack.config.js等，查看是不是哪里的配置出了问题。

本回答被题主选为最佳回答 , 对您是否有帮助呢?

编辑记录

查看更多回答(4条)

报告相同问题？

关注问题

vue -cli创建项目创建报错 npm vue.js 前端
2022-02-25 19:31

回答 2 已采纳看起来是权限问题，你用管理员身份运行cmd或者prowshell
vue-cli导入vue-quill-editor报错Cannot read properties of undefined (reading '_c') vue.js
2022-12-16 10:35

回答 1 已采纳换了个写法和引入方式就可以了vue-json-excel这个包不行感觉是版本的问题使用这个vue-json-excel3这个包正常导入就行了可以正常导出正常引入就行了
前端vue-cli框架中引入外部css文件报错问题 vue.js 前端前端框架有问必答
2022-03-17 15:45

回答 3 已采纳这路径不对吧。不能使用绝对路径。需要把css放到项目里然后相对路径引入./assetss/css/style.css
❤ Vue2+vue-cli+vue-router+vuex +elementUI/vant项目搭建
2023-07-10 11:39

林太白的博客 ❤ Vue2+vue-cli+vue-router+vuex +elementUI/vant 完整搭建
为什么我全局安装vue-cli的时候总是报错呢？ vue.js
2019-06-02 21:05

回答 2 已采纳或许你可以用 cnpm install -g vue-cli 试一下
使用vue-cli预览pdf文件 vue.js
2022-07-13 11:18

回答 2 已采纳正常浏览pdf就是下载下来然后默认网页下载之后就可以在页面中呈现pdf效果你可以在鼠标移入浮层时加个下载按钮，因为肯定是已经上传的了嘛对吧，所以你的文件是上传到服务器也好，oss也好都是可以用 w
vue-video-player报错 vue.js
2018-05-11 08:38

回答 1 已采纳把main.js中关于hls的支持改为：import 'videojs-contrib-hls'
Vue-Cli搭建Vue项目及使用
2024-07-16 23:09

2301_78158568的博客 cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue...
现在的vue-cli还需要在配置webpack吗 vue.js webpack 前端
2021-12-10 14:20

回答 2 已采纳具体根据需求配置。如果定制化需求不高内置的完全够用。有的项目就必须修够 webpack配置。比如打包后输出特定格式的文件。文件夹
用vue-video-player的时候运行报错 vue.js 前端
2022-05-31 14:19

回答 1 已采纳删除main.js中对vue-video-player的引入，在特定使用的页面单独引入，或者封装成组件或者看看是不是版本的关系，我这边用的下边的没有问题 npm i vue-video-player
1 npm ERR! big-screen-vue-datav@1.0.1报错 vue.js
2021-05-10 15:24

回答 1 已采纳 big-screen-vue-datav 这个插件有问题，你先npm uninstall big-screen-vue-datav ,再npm install big-screen-vue-datav
使用Vue-cli2.0和 Vue-cli3.0创建vue项目及配置
2023-06-09 13:22

易鹤鹤.的博客 g vue-cli 卸载完成之后在安装 npm install vue-cli -g 第二步：基于webpack创建项目 vue init webpack project(项目名称) // 安装过程 Project name (my-project) // 项目名称（我的项目，名称不能大写） Project ...
vue-awesome-swiper 报错Module not found: Error: vue.js
2022-06-14 21:42

回答 1 已采纳 swiper的版本要看你的vue是2还是3，官网上有解释。。5.0版本与之前版本不兼容，只适合与vue3，旧的版本有这三个，
Vue-cli(vue脚手架)上万字总结，超详细教程
2022-04-02 21:55

猫四爷的博客 npm install -g @vue/cli 1.2、创建Vue脚手架工程进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue...
【vue-cli搭建vue项目的过程2.x】
2024-05-21 18:31

qq_23128255的博客搭建vue项目、eslint代码规范
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 3月16日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 3月8日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 3月8日

悬赏问题

¥15 气象网格数据与卫星轨道数据如何匹配
¥15 VS target framework下拉菜单中不显示(语言-c#|开发工具-visualstudio)
¥100 java ee ssm项目悬赏，感兴趣直接联系我
¥15 微软账户问题不小心注销了好像
¥15 x264库中预测模式字IPM、运动向量差MVD、量化后的DCT系数的位置
¥15 curl 命令调用正常，程序调用报 java.net.ConnectException: connection refused
¥20 关于web前端如何播放二次加密m3u8视频的问题
¥15 使用百度地图api 位置函数报错？
¥15 metamask如何添加TRON自定义网络
¥66 关于川崎机器人调速问题

vue-cli、vuex、前端报错

5条回答 默认 最新

问题事件

悬赏问题

5条回答默认最新