vue项目之index.html如何引入JS文件

更新时间：2022年12月07日 11:46:51 作者：牛先森家的牛奶

这篇文章主要介绍了vue项目之index.html如何引入JS文件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue index.html引入JS文件

注意路径的写法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow"  rel="external nofollow" >
    <title><%= webpackConfig.name %></title>
    <!-- 前端监控 -->
    <script src="/lib/monitor/web-report-default.min.js"></script>
    <script>
      Performance({
        domain: 'https://frontend-monitor.com/api/v1/report/web',
        add:{
        appId:'<%= htmlWebpackPlugin.options.monitorId %>'   // 生成的其应用的appid
        }
      })
    </script>
    <!-- 友盟 -->
    <script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1279953853&web_id=1279953853"></script>
    <script>
      document.querySelector('a[title]').style.display = 'none'
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

注意点

<script src="/lib/monitor/web-report-default.min.js"></script>

打包的文件

index.html引入js文件失效的解决

在static文件夹下写了一个config.js配置文件，但是引入后报错，提示没找到该文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow"  rel="external nofollow" >
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="main"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="./static/config.js"></script>
    <script type="text/javascript" src="./static/leader-line.min.js"></script>
  </body>
</html>

解决办法

引入时，将 "./" 去掉即可

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue项目动态渲染input,绑定的参数不实时更新问题
这篇文章主要介绍了vue项目动态渲染input,绑定的参数不实时更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue项目打包后部署到服务器的详细步骤
这篇文章主要介绍了vue项目打包后部署到服务器,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
vue $nextTick实现原理深入详解
这篇文章主要介绍了vue $nextTick实现原理深入详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
Vue的transition-group与Virtual Dom Diff算法的使用
这篇文章主要介绍了Vue的transition-group与Virtual Dom Diff算法的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
vue基于v-charts封装双向条形图的实现代码
这篇文章主要介绍了vue基于v-charts封装双向条形图的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
vue 自定义指令自动获取文本框焦点的方法
今天小编就为大家分享一篇vue 自定义指令自动获取文本框焦点的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue报错Failed to execute 'appendChild&apos
这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
vue中的导航守卫使用及说明
这篇文章主要介绍了vue中的导航守卫使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
详解Vue3页面如何自适应表格滚动高度
这篇文章主要为大家详细介绍了Vue3页面如何自适应表格滚动高度,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2024-02-02
Vue+FormData+axios实现图片上传功能的项目实战
本文主要介绍了Vue+FormData+axios实现图片上传功能的项目实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06