vue如何引入本地js(不被打包编译的js)文件

最新推荐文章于 2024-05-05 21:19:02 发布
最新推荐文章于 2024-05-05 21:19:02 发布
阅读量8.7k 收藏 6
点赞数 4
分类专栏： 问题 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcdsdf14545/article/details/105810190
版权

1、不对本地js进行编译：
需要将js放到public目录下，在public目录下的文件不会被编译。
同时不要使用import xx form '相对路径/xx.js’去引入xx.js，因为import使用相对路径会默认对该文件进行编译
2、其次不被打包编译的js文件，不会被import识别
所以使用import xx form '绝对路径/xx.js’的时候会出现This dependency was not found 的报错
3、解决办法
在public目录下的index.html中，按照原生的js文件引入

在这里插入图片描述

路过乌云
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue.min.js 文件直接引入就可以
12-30
vue源文件vue.js
vue编译打包本地查看index文件的方法
08-27
在Vue.js开发过程中，我们经常需要将项目编译打包，以便于部署到生产环境或者预览本地构建结果。本文将详细介绍如何在Vue编译打包后，本地查看`index.html`文件，以及`/build/config/index.js`配置文件中的`...
vue中引入本地js文件（实测有效）
weixin_48447589的博客
07-19 4582
我打包之后的文件放在static下面就吧本地js文件放在public/js文件夹下。在index.html文件下引入js文件。将js文件放在public文件夹下面。
vue引用js文件的多种方式
最新发布
忧郁的蛋的专栏
05-05 966
(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。(4) 在main.js 引入就ok了 (测试这一步不用也可以)(2)在webpack.base.conf.js里加入。用到了es6的语法。
vue的使用（引用/创建vue项目）（一）
weixin_38797742的博客
02-28 1549
在程序开发中，有三种方式创建vue项目，本地引入vuejs、使用cdn引入vuejs、使用vue-cli创建vue项目。其中vue-cli可以结合webpack打包工具使用，大大方便了开发步骤，使用广泛。 一、vue本地引用 在官网下载vue.js，通过script标签引入。 开发版本：https://vuejs.org/js/vue.js 包含完整的警告和调试模式 生产版本：https://vuejs.org/js/vue.min.js 删除了警告，30.90KB min+gzip 注意：在开发环境下不要
vue(12) : 引入本地js
Lxinccode的博客
09-01 1469
【代码】vue(12) : 引入本地js。
Vue.js CLI4 Vue.config.js标准配置 （最全注释）
qq_43248623的博客
08-04 1775
前言： Vue.js CLI工具 不知不觉发展到了4.0时代，CLI给人最直白的感受是没有了build文件夹跟config文件夹，所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。 有三种方式，推荐第二种标准版（无需安装依赖，直接复制即可配置）。 1、依赖库 npm install vue-cli-configjs 2、标准版 // vue.config.js const path = require('path'); const IS_PR
Vue项目打包及优化处理
jyn15159的博客
10-10 1815
项目打包 1. 打包介绍 什么是项目打包： 项目开发是通过import这样的模块化技术完成的，而import代码在浏览器中不能直接运行。 项目开发是通过vue单文件组件方式开发完成的，浏览器不能运行vue单文件组件。 项目开发是通过less进行css样式控制的，浏览器不能运行less文件。 项目开发是通过element-ui组件库开发，浏览器不能运行组件库组件。 项目开发是通过es6/es7等高级js技术完成的，中低浏览器版本不能运行es6/es7等高级语法。 …… 基于以上若干，项目发布之前需要做打包处
vue引入静态js文件的方法
10-15
在`config.js`中，由于该文件不会经过Webpack编译，所以应当使用ES5语法，避免使用可能不被浏览器兼容的ES6特性。例如： ```javascript // config.js var config = { networkGuard: { accountDBID: '9E54B0CA55E...
将一个vue文件编译成js文件的工具
08-12
总之，将 `.vue` 文件编译为 `.js` 文件是Vue.js项目开发中的重要步骤，这个过程依赖于Webpack和Vue CLI的配合。理解这一过程有助于我们更好地管理和优化项目，提高开发效率和用户体验。通过深入学习和实践，开发者...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
vue.min.js
02-22
vue.min.js是vue已封装好vue.js技术，方便我们学习vue技术，使用可直接将其vue.min.js导入HTML中的[removed][removed]中的src中，即可方便学习和快捷使用vue相关技术。
引入vue.min.js
小汤圆
07-06 1954
** 导入vue的方法非常简单，只需要去官网下载vue.min.js即可 ** 然后直接拖到项目里 加入如下代码
【Vue2】引入本地原生JS文件
joanmelon的博客
02-25 4036
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
vue非编译的模块化写法
茅坤宝骏氹的博客
07-08 1930
一、构建require.js环境（1）网页设置require.js<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="app"> <transition name="tsfade&amp
Vue 项目中引入本地第三方 JS 库
不怕麻烦的鹿丸的博客
03-15 3972
ESLint 语法检测会报错： ESLint 语法检测不会报错 ESLint 语法检测不会报错 ESLint 语法检测会报错： 项目开启了 ESLint 语法检测的话，会报一个 error ：
1.vue基础（一）引入vue.js
热门推荐
qq_41634943的博客
04-14 1万+
文章目录1.直接引入vue.js文件2.CDN3.注意事项（其中的小问题） 个人是跟着尚硅谷的课程做的笔记**** -----个人第一篇博客，纯是记录自己学习的过程，有哪些错误请各位大神指点---- 1.直接引入vue.js文件 <script type="text/javascript" src="../js/vue.js"></script> 文件在vue官网可以直接下载。 2.CDN <script src="https://cdn.jsdelivr.net/npm/v
Java代码可以实现vue文件、js文件编译程序嘛
05-25
可以，你可以使用 webpack 这个打包工具来实现将 Vue 文件和 JavaScript 文件编译打包成可执行的文件。webpack 是一个非常流行的打包工具，它支持各种类型的文件打包，包括 Vue 文件、JavaScript 文件、CSS 文件等等。在 webpack 中，你可以使用各种不同的插件和加载器来处理不同类型的文件，并且可以根据自己的需要进行配置和定制。 下面是一个使用 webpack 打包 Vue 文件和 JavaScript 文件的简单示例： 1. 首先，安装 webpack 和 webpack-cli： ``` npm install webpack webpack-cli --save-dev ``` 2. 然后，创建一个 webpack 配置文件 webpack.config.js，内容如下： ``` const path = require('path'); module.exports = { entry: './src/main.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.vue$/, use: 'vue-loader' }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } }; ``` 其中，entry 指定了入口文件，output 指定了输出文件的名称和路径，module.rules 中的两个规则分别指定了如何处理 Vue 文件和 JavaScript 文件。 3. 在 package.json 中添加打包命令： ``` "scripts": { "build": "webpack --mode production" } ``` 4. 最后，运行打包命令： ``` npm run build ``` 这样就可以将 Vue 文件和 JavaScript 文件打包成可执行的 bundle.js 文件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值