html网页引入同级目录下的js文件

时间: 2023-09-11 15:05:47 浏览: 182

vue在index.html中引入静态文件不生效问题及解决方法

在Vue.js开发过程中，我们有时需要在`index.html`文件中引入静态资源，如CSS、JavaScript文件或图片等。然而，遇到静态文件无法正常加载的问题可能会导致应用样式或功能缺失。本文将深入探讨这个问题，并提供两种可能的原因及相应的解决方法。 ### 原因一：静态文件位于`src`文件夹内 **原因分析：** Vue CLI默认的构建流程不包括`src`文件夹中的静态资源。因此，当我们在`index.html`中尝试引入`src`文件夹内的静态文件时，这些文件不会被处理并打包到最终的输出目录中，导致浏览器无法正确加载。 **解决办法：** 将静态文件移动到`static`目录下。`static`是Vue CLI预设的存放静态资源的目录，位于项目根目录。这样，当你在`index.html`中引入这些文件时，Vue CLI会在构建过程中自动处理它们。例如，将CSS文件`styles.css`从`src`移动到`static`： ```html  <link rel="stylesheet" href="/styles.css"> ``` ### 原因二：静态资源目录命名非`static` **原因分析：** 如果你自定义了静态资源目录，比如命名为`public`，并且没有正确地配置Vue CLI的构建设置，那么Vue CLI在打包时不会找到并复制这些资源到输出目录。 **解决办法：** 需要修改三个配置文件来确保Vue CLI识别和处理自定义的静态资源目录： 1. **`config/index.js`** - 更新`assetsSubDirectory`为你的自定义目录名，如`public`。 ```javascript dev: { assetsSubDirectory: 'public', // 从'static'更改为'public' ... }, build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'public', // 从'static'更改为'public' ... } ``` 2. **`build/webpack.dev.conf.js`** - 更新`CopyWebpackPlugin`的源目录。 ```javascript new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../public'), // 从'static'更改为'public' to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) ``` 3. **`build/webpack.prod.conf.js`** - 同样更新`CopyWebpackPlugin`的源目录。 ```javascript new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../public'), // 从'static'更改为'public' to: config.dev.assetsSubDirectory, ignore: ['.*'] } ]) ``` 完成上述修改后，Vue CLI将在构建过程中正确地复制`public`目录下的静态资源至输出目录，并且`index.html`可以成功引用它们。 ### 总结在遇到Vue在`index.html`中引入静态文件不生效的问题时，首先要检查静态文件是否位于`static`目录下，如果不是，需要将其移入或调整配置。确认静态资源目录是否与配置文件中的设置一致，如果不一致，应相应地修改配置。通过这些步骤，通常可以解决静态文件加载失败的问题。记住，持续学习和理解Vue CLI的工作原理以及项目构建流程对于解决这类问题至关重要。同时，保持良好的编程习惯，如遵循框架的推荐配置，可以帮助避免许多不必要的问题。希望本文对你的Vue开发有所帮助，如果你在实践中遇到其他问题，欢迎提问交流。

可以使用相对路径来引入同级目录下的js文件。假设你的html文件和js文件在同一个文件夹中，可以使用以下代码来引入js文件： ```html <script src="./filename.js"></script> ``` 其中`.`表示当前目录，`filename.js`是你要引入的js文件名。

阅读全文

html网页引入同级目录下的js文件

相关推荐

完美解决调用上级目录中的css样式文件的路径问题

如何通过Django使用本地css/js文件

html怎么引入同级目录下的js文件

html网页引入同级目录下的json数据

js 如何引入同级目录下的bytecode.txt文件

node html使用同级js

web目录下放了jquery包，web下的html如何正确导包

帮我写一篇html个人网页模板

用js语言写一个登录注册界面

index.html:1 Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

用bootstrap+css+js写一个登录的页面，要求有nav,footer,有背景图片

单词小程序音频怎么弄

let hiprintTemplate = new hiprint.PrintTemplate({ template: template, }) hiprintTemplate.print2(printData) 修复此代码打印出内容为print-lock问题

编写一个基于nodejs的简易聊天室

使用jquery/js获取iframe父子级、同级获取元素的方法

python+django加载静态网页模板解析

能够兼容IE8以下浏览器的H5 Video标签播放插件，测试可用

python2.7的flask框架之引用js&css等静态文件的实现方法

在CODEIGNITER中 在CI中引入外部的JS与CSS呢

最新推荐

SpringBoot上传文件到本服务器 目录与jar包同级问题

在Python 不同级目录之间模块的调用方法

解决idea打包成功但是resource下的文件没有成功的问题

构建基于Django和Stripe的SaaS应用教程

管理建模和仿真的文件

R语言数据处理与GoogleVIS集成：一步步教你绘图

如何使用Matlab实现PSO优化SVM进行多输出回归预测？请提供基本流程和关键步骤。

Symfony2框架打造的RESTful问答系统icare-server

"互动学习：行动中的多样性与论文攻读经历"

R语言与GoogleVIS包：打造数据可视化高级图表

在CODEIGNITER中在CI中引入外部的JS与CSS呢

SpringBoot上传文件到本服务器目录与jar包同级问题