Nuxt 项目引入外部Js的正确姿势 ,问题描述:打包构建之后引入的外部 js失效,构建之后的 .nuxt 文件夹下的js文件中,引入 js 的script标签凭空消失!

2023-10-26

首先先说我遇到的问题描述:
      我是用vue + nuxt项目,项目中使用了阿里播放器,于是我在vue页面中直接引入了阿里播放器的 css和js文件,然后运行没有任何问题:如下图所示:
在这里插入图片描述
但是!! 当我打包以后,发现这个页面竟然报错,我打开 打包好的 【.nuxt】文件夹,找到了这个vue页面打包后的js文件,根本就搜不到js引入的代码,只有css的。于是我把js引入的Script标签换到了布局页面上,还是不行,在网页上打开控制台查看html的代码,也根本找不到这一个 Script标签。引入 外部 js 的代码,在打包以后,凭空消失!

      我知道这肯定是因为引入方式有问题,最后也没有查到相关资料,但是我根据这四年学编程的经验,经过一次次的尝试,最后找到了正确的方式,nuxt引入外部Js的正确姿势!
      就是通过配置引入,在 【nuxt.config.js】文件中引入,如下图所示:
在这里插入图片描述

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: ' ',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'keywords', name: 'keywords', content: ' ' },
      { hid: 'description', name: 'description', content: ' ' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    //就是这个位置!!!!!
    script:[
      {src: "https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js", type:"text/javascript"}
    ]
  },
  ......
  ......
  ......
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Nuxt 项目引入外部Js的正确姿势 ,问题描述:打包构建之后引入的外部 js失效,构建之后的 .nuxt 文件夹下的js文件中,引入 js 的script标签凭空消失! 的相关文章

  • 在 Vue 组件中定义用户定义的 getter

    我的问题与 Vue 相关 更具体地说是反应性和反应性 getter setter https v2 vuejs org v2 guide reactivity html https v2 vuejs org v2 guide reactiv
  • Lighthouse:无法在本地主机上运行生成报告

    正如标题所示 我正在尝试为本地提供的 nuxt 应用程序生成报告 如果我通过 DevTools 生成报告 则需要非常长的时间 并且给我的评分非常差 与在部署的同一站点上生成报告相比 如果我尝试使用灯塔扩展 生成报告 按钮将被禁用 我是否会犯
  • Workbox:构建项目时无法缓存所有文件

    I use Vuejs我用workbox webpack plugin为了使我的网站离线 我想缓存一个包含我所有文件 3个文件 的文件夹 如下图所示 但是当我构建我的项目时 使用Laravel mix The main js 包含 Vue
  • Konvajs/Vue-Konva 使用连接器动态连接形状

    我在用Konvajs Vue Konva在我的内Vuejs Nuxt应用 使用Konva我正在创建Rect在运行时动态形状 现在我想用某种Connectors连接不同的Rect Shapes这样我就可以得到其逻辑source Rect哪个是
  • Vue.js:条件类样式绑定

    我有一些数据可以通过以下方式访问 content term goes here 这评估为true or false 我想根据表达式的真实性添加一个类 如下所示 i class fa i where true给我上课fa checkbox m
  • 如何从vue3中的“setup”方法中“发出”事件?

    我知道我可以打电话给emit方法从setup方法 但是有没有办法从任何其他函数发出事件而不传递emit设置方法中的方法 不是中的功能 methods选项 但是一个useXXX功能 setup函数有两个参数 第一个是props 第二个是con
  • Vue.js $children 按组件名称

    我正在尝试按名字访问特定的孩子 目前 由于孩子所在的位置 我这样称呼孩子 this root children 0 没关系 只要那个孩子总是 0 但如果有一种方法可以做类似的事情那就太好了 this root children detail
  • 如何在 Vue.js 中使用“img src”? [复制]

    这个问题在这里已经有答案了 我的 Vue js 模板中有这个 img src media avatars joke avatar alt 它位于一个呈现笑话的循环内 其他字段渲染得很好 但对于图像 我在控制台中收到此错误 src media
  • 在Vuex模块中进行继承的方法

    我使用 VueJS 和 Vuex 构建我的应用程序 当我有多个模块使用相同的数据字段时 我遇到了这个问题 它是关于像 dat 这样的 API 配置 getUsers state commit axios get urls API USER
  • 从 vueJS 方法调用 setTimeout() 不起作用

    我试图允许用户从应用程序重置或关闭给定服务器 我现在正在开发界面 并希望向用户提供有关正在发生的事情的消息 我显示数据对象中定义的消息来指示所采取的操作 我使用 setTimeout 来切换重置 消息和重置消息 请参阅以下方法 system
  • 未找到 CSS 和 JS 的 Vue dist 路径

    我在构建后渲染 VueJS 应用程序时遇到问题 当我查看构建文件夹并检查路径时 我的资产 css 和 javascript 的路径开头有一个正斜杠 这使得我的 css 资源和 javascript 无法找到 我想知道在运行构建脚本之前如何避
  • axios get 带有标头授权的请求在 Edge 浏览器上不起作用

    我在 vuejs 应用程序中使用带有标头的 axios get 请求 在 Chrome 和 Firefox 中工作正常并得到响应 但在边缘它不起作用 出现网络错误 我正在发送带有标题授权的请求 axios get url headers A
  • 外部 API 的 CORS 问题 - 通过 PostMan 工作,但不能使用 Axios 进行 HTTP 请求 [重复]

    这个问题在这里已经有答案了 正在开发一个涉及汽车数据的新 Laravel 项目 并找到了一个免费的查找 API http www carqueryapi com documentation api usage 一个示例端点是 https w
  • 类型错误:Object(...) 不是 Vue 中的函数

    我是 Vue 新手 正在尝试处理表单 我正在制作一个网络应用程序来管理会议 为此我有一个多步骤表单来处理访客和主持人数据 当我单击提交按钮时 出现以下错误 TypeError Object is not a function 我在 stac
  • Axios-一次发出多个请求(vue.js)

    如何使用 axios 和 vue 并行发出多个请求 由于 axios 可以被 React 和 Vue 使用 因此代码几乎相同 请务必阅读axios 文档 https github com axios axios 你可以从那里理解它 无论如何
  • VueJS/浏览器缓存生产版本

    我有一个 VueJS 应用程序 每当我跑步时npm run build它创建了一组新的dist 文件 但是 当我将它们加载到服务器上 删除旧版本后 并在浏览器中打开页面时 它会加载旧版本 我假设从缓存 当我刷新页面时 它加载新代码没有问题
  • 如何使用 VueJS 将 API 中的数据存储在 localStorage 中

    我使用 VueJS 练习简单的 SPA 要求我监听 API 并将其一些数据保存在浏览器的 localStorage 中 但是我对 VueJS 仍然不是很有经验 所以我不知道如何获取特定数据并保存将其发送给 LS 以便登录用户稍后可以看到他们
  • quasar:构建应用程序时出现 vite 错误

    当我做quasar build它给出以下内容 deb2302user deb2302 tmp2303 vue kitty quasar build d88888b d88P Y88b 888 888 888 888 888 888 8888
  • 如何在VueJS中将所有事件传递给父级

    传递道具 In VueJS如果你设置inheritAttrs to false并使用v bind attrs 您将组件中未声明的所有 props 传递给其子组件 是否有类似的方法将来自子级的所有事件传递给其父级VueJS 代码示例 Wrap
  • 如何在 Nuxt.js 中设置 beforeResolve 导航防护

    有没有办法在 nuxt config js 中添加 beforeResolve 导航防护 我的 nuxt config js module exports router beforeResolve to from next if this

随机推荐

  • vue3 antd 表格点击和点击背景色

    页面
  • win7在64位系统下编译openssl

    以前在笔记本上配置过openssl 0 9 8g版本 今天在公司的台式机上配置死活没配置成功 机器的系统是win7 64位 编译openssl 1 0 1e出现各种莫名的错误 最后无意中编译了1 0 0 a版本编译成功了 如果出现ml找不到
  • Selenium-Server-Standalone搭建

    一 概述 先说说背景吧 Selenium是一个优秀的自动化测试框架 可以模拟浏览器的各种操作来代替人工操作 不同的浏览器有 不同的driver来驱动 之前项目中使用的firefoxDriver chromeDriver有一个缺点 就是浏览器
  • VSCode配置MSVC+VSCode使用easyx库,2021.5.13日配置~~

    VSCode配置MSVC VSCode使用easyx库 2021 5 13日配置 想必很多人和我一样 想用vscode编程c easyx库不支持MinGW 一般人都是直接使用vs2019安装easyx库用来GUI编程 那么爱折腾的VSCod
  • 使用PHP简单操作Memcached

    记得一定要先启动Memcached哦 root localhost usr bin memcached d l 127 0 0 1 p 11211 m 150 u root 使用ps命令查看一下运行状态 root localhost ps
  • 结构体内存对齐详解

    目录 一 结构体的对齐规则 二 修改默认对齐数 三 位段 四 枚举 五 联合 共用体 一 结构体的对齐规则 1 第一个成员在与结构体变量偏移量为0的地址处 2 其他成员变量要对齐到某个数字 对齐数 的整数倍的地址处 对齐数 编译器默认的一个
  • Ubuntu16.04 64位下安装VMware Tools过程

    因为在虚拟机下安装Ubuntu16 04 64位时无法进入全屏模式 采用另外一种方法解决了 但是还是想安装一下VMware Tools 防止以后出现相关问题 好啦 下面进入正题 1 在虚拟机下会看到安装 VMware Tools 单击安装
  • C# 各种符号用法

    参考 C 的7种用法 c 软泡芙的博客 CSDN博客 C 问号操作符详解 知乎 的7种用法 可空类型修饰符 int i num null 表示可空的整型 DateTime time dateTime null 表示可空的时间 三元 运算符
  • join(long millis)意思?join()作用

    join 作用 class JoinThread implements Runnable public void run for int i 0 i lt 100 i System out println Thread currentThr
  • FT2232作为JTAG烧录器的使用步骤详解

    FT2232作为JTAG烧录器的使用步骤详解 FT2232作为JTAG烧录器的使用步骤详解 配置OpenOCD环境 已经配置好的可以跳过 步骤 1 安装 FT2232HL 芯片的驱动 安装文件为 CDM21228 Setup exe 步骤
  • unity AR3D物体识别

    上篇讲到了各种AR插件的一些对比 因为上个项目需求用到3D物体追踪 所以使用了EasyAR和Vuforia两种进行了测试对比 因为如果需要AR识别 都需要有识别点 大致都是基于物体材质纹理来进行识别 1 先讲一下EasyAR的3D物体识别
  • 【百问网】物联网项目学习总结

    初步实现项目 项目程序流程图 TCP连接流程 模式1 站点模式 写代码去实现了这个TCP的连接流程 我们的思路就是 首先直接操作ESP8266 进行功能验证 ST Link Debugger 点击Settings 勾选Reset and R
  • 远程访问数据库出错的解决办法

    案例 在aws服务器中的项目访问在华为云中的测试服务器的数据库 报错 Access denied for user root ec2 XXX XXX XXX XXX cn north 1 compute amazonaws com cn u
  • Linux指令系统文件复制到U盘

    Linux指令系统文件复制到U盘 文章目录 Linux指令系统文件复制到U盘 1 建立U盘挂载点 2 查看U盘所在分区 3 查看U盘类型 4 挂载U盘 5 复制文件 6 移除U盘 1 建立U盘挂载点 在挂载点处建立文件夹 mkdir 路径
  • 【Java面试题汇总】设计模式篇(2023版)

    导航 黑马Java笔记 踩坑汇总 JavaSE JavaWeb SSM SpringBoot 瑞吉外卖 SpringCloud 黑马旅游 谷粒商城 学成在线 设计模式 牛客面试题 目录 谈谈你对设计模式的理解 谈谈你对单例模式的理解 手写一
  • [17]AWK记录、字段、模式、跨平台移植及正则表达式

    一 记录与字段 1 记录分隔符 默认行输入和输出的分隔符都是回车 保存在RS和ORS内部变量中 变量 0 awk每次一行取得整条记录 0随之改变 同时内部变量NF 字段的总数 也随之变化 变量NR 每条记录的行号 处理完一行将会加1 所以全
  • InnoDB undo log解析(二)

    在 上一篇中已经介绍了InnoDB undo log的组织结构 并通过一个示例并结合InnoSQL来分析insert undo log记录格式 本篇中介绍update undo log的记录格式 update undo log有以下三种类型
  • cocoeval 解析

    1 COCO目标检测比赛中的模型评价指标介绍 dulingwen的博客 CSDN博客 2 COCO目标检测测评指标 简书 1 Params类 对于COCO格式的数据检测 我们主要分为不同的IoU阈值 不同的面积范围 单张图片的最大检测数量
  • PAT 5 猴子吃桃问题(递归)

    猴子吃桃问题 15 分 一只猴子第一天摘下若干个桃子 当即吃了一半 还不过瘾 又多吃了一个 第二天早上又将剩下的桃子吃掉一半 又多吃了一个 以后每天早上都吃了前一天剩下的一半加一个 到第N天早上想再吃时 见只剩下一个桃子了 问 第一天共摘了
  • Nuxt 项目引入外部Js的正确姿势 ,问题描述:打包构建之后引入的外部 js失效,构建之后的 .nuxt 文件夹下的js文件中,引入 js 的script标签凭空消失!

    首先先说我遇到的问题描述 我是用vue nuxt项目 项目中使用了阿里播放器 于是我在vue页面中直接引入了阿里播放器的 css和js文件 然后运行没有任何问题 如下图所示 但是 当我打包以后 发现这个页面竟然报错 我打开 打包好的 nux