vue cli 引入静态js
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它提供了零配置的原型开发，并且可以通过插件进行扩展。在 Vue CLI 项目中引入静态 JavaScript 文件通常有以下几种方式：
基础概念
静态 JavaScript 文件是指不依赖于特定框架或环境的普通 .js 文件。它们可以在浏览器中直接运行，也可以被其他脚本引用。
相关优势
- 易于管理：静态文件可以直接放在项目的静态资源目录中，便于管理和维护。
- 兼容性好：不需要担心框架版本兼容性问题。
- 性能优化：可以通过构建工具进行压缩和缓存优化。
类型
- 外部脚本：通过
<script>标签在 HTML 文件中引入。 - 内部脚本：直接在 HTML 文件中的
<script>标签内编写代码。 - 模块脚本：使用 ES6 模块语法
import或require引入。
应用场景
- 第三方库：如 jQuery、lodash 等。
- 工具函数：通用的辅助函数或工具类。
- 插件脚本：需要独立运行的脚本，如地图 API、数据分析脚本等。
引入方法
方法一：在 public/index.html 中引入
如果你想引入的静态 JS 文件不需要参与 Vue 的构建过程，可以直接在 public/index.html 文件中通过 <script> 标签引入。
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<div id="app"></div>
<!-- 引入静态 JS 文件 -->
<script src="./static/js/myScript.js"></script>
</body>
</html>方法二：在 Vue 组件中引入
如果你需要在特定的 Vue 组件中使用静态 JS 文件，可以在该组件的 <script> 部分使用 import 或 require 语句引入。
// 在 Vue 组件中引入静态 JS 文件
<script>
import myScript from '@/static/js/myScript.js';
export default {
mounted() {
// 使用 myScript 中的功能
myScript.someFunction();
}
}
</script>方法三：在 vue.config.js 中配置
如果你想让静态 JS 文件被 Webpack 处理，可以在 vue.config.js 文件中进行相应的配置。
// vue.config.js
module.exports = {
configureWebpack: {
externals: {
'myScript': 'myScript' // 假设 myScript 是全局变量名
}
}
};然后在 HTML 中通过 CDN 或本地路径引入：
<!-- public/index.html -->
<script src="https://example.com/path/to/myScript.js"></script>遇到的问题及解决方法
问题：静态 JS 文件没有被正确加载
- 检查路径：确保文件路径正确无误。
- 检查网络：确认网络连接正常，文件能够被访问。
- 查看控制台：打开浏览器的开发者工具，查看控制台是否有错误信息。
解决方法：
- 确保文件存在于指定的路径下。
- 如果是通过 CDN 引入，检查 CDN 是否可用。
- 如果是在构建过程中出现问题，检查
vue.config.js的配置是否正确。
示例代码
假设我们有一个简单的静态 JS 文件 myScript.js：
// static/js/myScript.js
export function greet(name) {
console.log(`Hello, ${name}!`);
}在 Vue 组件中引入并使用它：
// MyComponent.vue
<template>
<div>{{ message }}</div>
</template>
<script>
import { greet } from '@/static/js/myScript.js';
export default {
data() {
return {
message: ''
};
},
mounted() {
greet('World');
this.message = 'Greeting has been displayed.';
}
}
</script>以上就是在 Vue CLI 项目中引入静态 JS 文件的基础概念、相关优势、类型、应用场景以及可能遇到的问题和解决方法。
相关·内容
1回答
现代vue项目允许您在不预先配置服务器的情况下启动pre服务器。我们运行： npm run serve 这将转到package.json中的命令，例如： "scripts": { "build": "vue-cli-service build",
"lint": "vue</em
浏览 15提问于2019-10-14得票数 0
我用的是vue cli 3，Vuetify。我的后端程序员让我把我的css、js和img文件放在静态文件夹中。我该怎么做呢？我在vue cli 3上找不到webpack.config.js文件。有些人说使用vue.config.js文件，但我仍然不知道如何解决这个问题。谢谢。
浏览 4提问于2018-10-20得票数 1
由于CSP需求，我不得不在vue 2 CLI环境中转换静态Vue应用程序。
在阅读了大量在线文档之后，我意识到对于符合CSP的vue，您需要使用呈现函数和运行时版本的Vue.js。我的问题是，在将我的旧静态vue应用程序转换为Vue CLI构建过程后，我仍然得到一个‘不安全-eval’是不允许的消息。我不知道为什么会这样，因为Vue 2的cli构建过程显然使用了C
浏览 10提问于2022-09-29得票数 1
我用vue-cli(node.js+vue.js)做了一个项目，现在我需要部署它。如何在已经安装并配置好的服务器上运行(通过vue-cli)？我该怎么办？更新:我想部署一个完整的服务器，而不仅仅是静态的js。因为我有后端的API和一些东西。
浏览 13提问于2017-12-22得票数 0
回答已采纳
node.js做为中间层的前提下:
我想使用node渲染页面来解决这个问题，发现node有很多的模板引擎并不能很好的使用vue.js，只能传统的在html里面引入vue.js来绑定数据。刚刚接触node.js有点迷茫~
浏览 592提问于2017-11-24
我用vue cli，vue新前端生成了这个项目。我选择了打字稿，所有的人都向package.json倾诉。我在使用Vue路由器。在我读过的所有教程中，我看到每个人都使用Express。但我不想。如何使用ssr渲染器使vue路由器呈现我的页面？
浏览 2提问于2020-02-23得票数 0
回答已采纳
1回答
我使用的是一个用Vue CLI5 (Webpack 5)构建的、用Vue.js 3编写的单页面应用程序。该应用程序是由Laravel Vapor部署到亚马逊网络服务的Laravel应用程序提供的。该工具还将所有静态资产(包括JS块)上传到亚马逊网络服务S3，并通过CloudFront使其可用。 我想从这个CDN加载Vue.js应用程序中使用的所有静态资源。每当我编写静态资源(图像、字体等)的URL时，我都会使用这些函
浏览 40提问于2021-07-03得票数 1
回答已采纳
1回答
我的第一个VueJS应用程序结构非常简单，如： - App.vue - static/ - assets/- .gitignore- package.jsonbabel.config.js看起来是这样的"build": "vue-
浏览 2提问于2019-03-18得票数 0
1回答
我目前正在处理一个Vue.js项目，在这个项目中，我使用Vue CLI 3在lib模式下构建组件，如：vue-cli-service build --no-clean --target lib --nameComponentName.vue。如果在Vue实例中注册了这些组件，则可以使用任何网站。
然而，该网站包含它自己的样式表和组件。要开发和查看应用于组件的实际样式，我必须在我开发的每个组件中引入这些(共享)样式。因此，在使用上述命令
浏览 9提问于2019-12-09得票数 2
我将我的项目依赖项从Vue CLI移到Vite。我现在必须使用Vue.js 2.7，我还不能升级到Vue.js 3。我以前在Vue CLI中使用了vue-svg-loader，现在我正在尝试使用vite-svg-loader。看起来vite-svg-loader只支持Vue.js 3。是否有不同的方法来导入Vite & Vue.js 2.7的SVG文件？我
浏览 5提问于2022-07-07得票数 2
2回答
前端是用vue-cli作为SPA vue.js应用程序开发的(带有vuex和vue-路由器)，后端是Rails 5 API专用应用程序。
浏览 0提问于2018-06-11得票数 0
回答已采纳
当我尝试做一个新的vue-cli webpack建筑时，我一直被拒绝的抛出错误。昨晚起作用了，但现在我突然发现了这些错误。有人知道怎么解决这个问题吗？/usr/local/lib/node_modules/vue-cli/node_modules/rimraf/rimraf.js:312 ^
Error
浏览 10提问于2017-07-07得票数 0
回答已采纳
因此，我在localhost:8080上运行我的Vue.js应用程序，在localhost:3000上运行我的Node.js服务器。该电子邮件由一个链接组成，该链接看起来像：localhost:3000/auth/resetpassword/40700dc92bb7be1ccf65fb120294f30a3be0e5b9单击此链接，我应该能够将其路由到vue我还注意到，我需要一个以localhost:8080开头的链接才能访问我的vue.js应用程序。那么有
浏览 1提问于2019-10-02得票数 0
我安装了vue-cli并制作了一些组件，一切都很好，直到我不得不用键更新一些对象值。key1: value1, key3: value3数据正在更新，但是视图没有更新，当我深入研究时，它说
Vue</em
浏览 5提问于2017-05-01得票数 1
1回答
下面是我的vue.config.js的样子 devServer:{ '^/appReplacer':
浏览 10提问于2022-01-11得票数 -1
回答已采纳
我正在使用vue.config.js重写webpack配置： "publicPath": "http://0.0.0.0:8080/app.js",
"path": "/Users/me/dev/
浏览 0提问于2019-04-25得票数 2
"babel-polyfill": "^6.26.0", }import babelPolyfill from 'babel-polyfill';
Vue.use(vueResource);谢谢你的帮助
浏览 0提问于2019-02-19得票数 5
我得到了一个Vue应用程序，它在Chrome，Firefox上运行得很好。但在IE-11和Ms Edge中的空白页。在控制台里没有Erorrs。我不是Vue开发人员，但我对Vue感兴趣。main.jsimport Vue from 'vue'
const EXCLUDED_PROD
浏览 4提问于2020-07-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
