Vue 写项目时遇到的报错

最新推荐文章于 2024-03-15 18:49:52 发布

原创最新推荐文章于 2024-03-15 18:49:52 发布 · 1.3w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue学习中遇到的报错

Vue项目专栏收录该内容

2 篇文章

订阅专栏

在Vue项目开发中，遇到了导入文件路径错误和上传素材时的401错误。错误原因是导入文件时@符号后未跟随斜线，以及使用Element-UI上传组件时缺少token信息。解决方法包括修正导入文件的路径，以及为上传组件的ajax请求添加token请求头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1

Failed to compile.

./src/views/login/index.vue?vue&type=script&lang=js& 
(./node_modules/cache-loader/dist/cjs.js??ref--12-0!
./node_modules/babel-loader/lib!./node_modules/cache-
loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/
lib??vue-loader-options!
./src/views/login/index.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 
'@assets/iconfont/iconfont.css' 
in 'e:\demo\topline\src\views\login'

导入文件时路径出错

导入文件代码：

import '@assets/js/gt.js'

@表示当前项目的src文集夹，上面的报错问题是@后面没有跟斜线

正确代码：

import '@/assets/js/gt.js'

2

上传素材时，报401错误，
在这里插入图片描述
原因：token信息不存在
因为之前是自己定义的axios 请求信息，定义的token
这次用的是element-ui 上传组件默认的ajax post上传请求，没有token信息。
解决办法：给上传组件的ajax加上token的请求头信息

<!-- headers给上传组件内部ajax设置请求头协议信息的,包括token的设置 -->
<!-- 格式：:headers='Authorization:'Bearer (fsdhsghsghsghshs)'' -->
      <el-upload
        style="float: right; padding: 3px 0"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :headers='setToken'
      >

  computed: { //计算属性
    // 拼装 el -uplode需要的token信息
    setToken () {
      let token = JSON.parse(window.sessionStorage.getItem('userinfo')).token
      return { Authorization: `Bearer ${token}` }
    }
  },

持续更新…