【轉】Vue項目報錯:Uncaught SyntaxError: Unexpected token <

来源:https://www.cnblogs.com/tynam/archive/2019/07/18/11210535.html
-Advertisement-
Play Games

這篇文章主要介紹了Vue項目報錯:Uncaught SyntaxError: Unexpected token <,在引入第三方依賴的 JS 文件時,遇到的一個問題,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧 遇到問題: 今天做一個 VUE 的項目,在引入第三方依賴的 ...


  這篇文章主要介紹了Vue項目報錯:Uncaught SyntaxError: Unexpected token <,在引入第三方依賴的 JS 文件時,遇到的一個問題,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

 

遇到問題:

  今天做一個 VUE 的項目,在引入第三方依賴的 JS 文件時,遇到了一個問題:

  

  控制台的提示:Uncaught SyntaxError: Unexpected token <

 

  按照提示進入文件,再看如下圖:

  

 

  仔細看了看 index.html 文件,發現原本我的 JS 文件是放在 /src/utils 文件夾下的,但引入 /src 和 /static 的文件是有區別的。

 

解決方案:

  解決辦法是將第三方依賴的 JS 文件放到 /static/utils 目錄下,引入路徑也改成:<script src="./static/utils/sockjs.js"></script>,這樣就不報錯了!

 

總結:

  1、assets文件夾與static文件夾的區別

    區別一:assets文件是src下的,所以最後運行時需要進行打包,而static文件不需要打包就直接放在最終的文件中了

    區別二:assets中的文件在vue中的template/style下用../這種相對路徑的形式進行引用,在script下必須用@import的方式引入而static下的文件在.vue中的任何地方都只要使用../這種相對路徑的方式引入,

  2、

    (1)assets用來放置樣式、靜態圖片,只要src下麵的組件中用到的資源就放在assets中。

  (2)static用來放沒有npm包的第三方插件,字體文件。

  (3)assets與components同級 components下的.vue引用靜態文件時,相對路徑為 ../assets/wapFront

  3、vue如何引入其它靜態文件:

    (1)src目錄下的資源只能import或require。

    (2)想靜態引入的話,建立一個與src同級的目錄例如static,然後把靜態資源放入該文件夾下,html的引入路徑如下:./static/...(註:試過一定要放在static文件夾下,否則報錯)

  

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

 

原文地址:http://www.manongjc.com/article/17978.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 轉自:https://blog.csdn.net/weixin_33979203/article/details/87621768 改進,再找不到key,返回''值,之前的是在找不到的情況下,查找到第一的值。 ...
  • 在使用eclipse連接mysql資料庫時報異常: java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES) at com.mysql.jdbc.SQLError.createSQLE ...
  • Dart作為高級語言,支持面向對象的很多特性,並且支持基於mixin的繼承方式,基於mixin的繼承方式是指:一個類可以繼承自多個父類,相當於其他語言里的多繼承。所有的類都有同一個基類Object,這和特性類似於Java語言,Java所有的類也都是繼承自Object,也就是說一切皆對象。 ...
  • 剛招來個Android,幹了半個月辭職了,他走之後,成堆的bug被測了出來,都是這個新人代碼都沒看懂就開始改的一塌糊塗,還給提交了。實在是讓人頭疼,清理了一個月多月才把他半個月寫的bug清理個差不多。實在是得不償失。有了這個前車之鑒,不得不重視新人的崗前培訓,畢竟面試找個來了就能上手的實在是太難了。 ...
  • 1. 出現錯誤提示:Intel HAXM is required to run this AVD,VT-x is disabled in BIOS的解決辦法。 點擊SDK圖標,安裝Intel x86 Emulator Accelerator (HAXM installer)。 在sdk路徑下,找到e ...
  • 拿到題目, 首先要先瞭解鏈表數據結構, 如下圖: 常規思路: 利用數組, 遍歷整個單鏈表, 將每個節點裝入數組中, 最終拿到數組根據索引(數組長度-1-n)就得到了倒數第n個元素. 簡單思路: 假設總長度為n, 倒數第k個對應正數第n-k-1, 那麼第一個指針移動k-1次, 第二個指針保持在head ...
  • 使用工具: 1.微信Web開發者工具 2.Visual Studio 2019 前端採用color UI,後端採用c# .net 過程中的幾個重點點記錄 1.color UI使用 下載colorUI以後 將icon.wxss、colorui.wxss拷貝至項目根目錄 在app.wxss中導入文件 @ ...
  • @[toc] 概念 全稱 : Cascading Style Sheet 級聯樣式表 (層疊) 作用 : 定義 如何顯示 HTML 元素 出現的原因 : 解決內容與表現分離的問題 好處 : 外部樣式表 可以極大提高工作效率 優勢 內容與表現分離 (類似於 蓋房子和裝修 ) 網頁的表現統一,容易修改 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...