解决 Uncaught SyntaxError: Unexpected token ‘<‘ 错误解决方法「建议收藏」

解决 Uncaught SyntaxError: Unexpected token ‘<‘ 错误解决方法「建议收藏」UncaughtSyntaxError:Unexpectedtoken’

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一、错误发生的环境

今天在运行 Vue 项目时,发现报了一个 Uncaught SyntaxError: Unexpected token '<' 错误,如图
在这里插入图片描述

瞄一眼 语法错误,还以为很简单,但事情并不是我想象的那样,点进去后是这样的
在这里插入图片描述
我当时就裂开, <!DOCTYPE html> 编辑器自动补全的东西居然还会错,肯定不可能,后来一番 google 才了解到,是 Vue内部的 静态资源文件引用规则没理解清楚。

二、解决办法

把放在 Vue项目 src/assets里边的资源文件放到 public 文件夹下来引用

2.1 assets文件夹与static文件夹的区别

区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了

区别二:assets中的文件在vue中的template/style下用…/这种相对路径的形式进行引用,在script下必须用@import的方式引入,而static下的文件在.vue中的任何地方只需使用…/这种相对路径的方式引入,

在这里插入图片描述

此外,放到 public 里的东西,可以不用写开头目录,脚手架打包的时候找不到,会去public文件夹找的,例如:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/183348.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 什么对山峰正如低陷对山谷_bfs系列

    什么对山峰正如低陷对山谷_bfs系列FGD小朋友特别喜欢爬山,在爬山的时候他就在研究山峰和山谷。为了能够对旅程有一个安排,他想知道山峰和山谷的数量。给定一个地图,为FGD想要旅行的区域,地图被分为 n×n 的网格,每个格子 (i,j) 的高度 w(i,j) 是给定的。若两个格子有公共顶点,那么它们就是相邻的格子,如与 (i,j) 相邻的格子有(i−1,j−1),(i−1,j),(i−1,j+1),(i,j−1),(i,j+1),(i+1,j−1),(i+1,j),(i+1,j+1)。我们定义一个格子的集合 S 为山峰(山谷)当且仅当:

    2022年8月8日
    4
  • idea2022.01.13激活码【最新永久激活】2022.02.24

    (idea2022.01.13激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年4月1日
    83
  • PEST分析模型「建议收藏」

    PEST分析模型「建议收藏」PEST分析模型PEST分析模型(PESTAnalysis)PEST模型简介  PEST分析是战略咨询顾问用来帮助企业检阅其外部宏观环境的一种方法。是指宏观环境的分析,宏观环境又称一般环境,是指影响一切行业和企业的各种宏观力量。对宏观环境因素作分析,不同行业和企业根据自身特点和经营需要,分析的具体内容会有差异,但一般都应对政治(Political)、经济(Economic…

    2022年6月5日
    50
  • js删除数组中指定元素并返回剩下的_js查找数组元素的下标

    js删除数组中指定元素并返回剩下的_js查找数组元素的下标Array.prototype.remove=function(dx){ if(isNaN(dx)||dx&gt;this.length){ returnfalse; } for(vari=0,n=0;i&lt;this.length;i++){ if(this[i]!=this[dx]){ …

    2022年10月1日
    0
  • 微型计算机原理与接口技术网课_微机原理接口技术答案

    微型计算机原理与接口技术网课_微机原理接口技术答案spContent=课程面向有志于从事计算机过程控制系统设计、或对计算机硬件结构感兴趣的学习者。总体目标是:具备输入/输出接口控制系统软硬件初步设计能力。课程以“家庭安全防盗系统”案例引导,主要介绍:计算机基础知识、微型机基本工作原理、80×86基本指令集、汇编程序设计、存储器接口设计、接口控制技术等。——课程团队课程概述在今天的信息化时代,计算机已成为了人类工作和生活中必不可少的一部分。计算机…

    2022年10月2日
    0
  • telnet远程登录AAA认证

    telnet远程登录AAA认证R1<Huawei>system-view//进入全局配置模式[Huawei]sysnameR1//改名[R1]undoinfo-centerenable//关闭信息告警提示[R1]interfaceg0/0/0//进入g/0/0接口[R1-GigabitEthernet0/0/0]ipaddress192.168.100…

    2022年6月7日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号