webpack+vue-cli项目中引入外部非模块格式js的方法

在开发vue的项目（我使用的是vue2）,需要添加js，虽然可以通过npm install安装插件，但是如果有一些插件并没有开源，这时候我们只有脸上宽面条了。所以我更倾向于在webpack中引入外部js文件。 1.直接引用Note:(红色标注部分)位置1：将页面中需要用到的js，引入进来，from后面是该js所在的文件目录；位置2：需要用到位置一中定义的变量Swiper;位置3：为防止eslint严格模式下报错，需要将位置2定义的swiper再次调用一下；以上这篇webpack+vue-cli项目中引入外部非模块格式js的方法就是小编分享给大家的全部内容了，希望能给大家一个参考在Vue.js项目开发中，尤其是基于`vue-cli`构建的项目，我们经常需要引入外部JavaScript库，这些库可能并未以模块化方式导出，而是直接通过``标签在HTML中引用。当遇到这样的情况时，我们可以借助Webpack来解决这个问题。本篇文章将详细介绍如何在Webpack+Vue-cli项目中引入非模块格式的外部JS文件。让我们理解Webpack的基本概念。Webpack是一个模块打包器，它将各种资源（如JavaScript、CSS、图片等）视为模块，并根据依赖关系进行打包。在Vue项目中，`vue-cli`已经帮我们配置好了基本的Webpack设置，我们只需要在此基础上进行扩展。引入外部非模块格式的JS文件，通常有两种方法： 1. **直接引用**： - **位置1：**在项目的`src`目录下创建一个`static`文件夹（如果尚未存在），将外部JS文件放入其中。例如，假设你有一个名为`externalLib.js`的文件，将其放在`src/static/js`目录下。 - **位置2：**在需要使用这个外部库的Vue组件中，使用``标签引入。在`.vue`文件的``标签下方，添加以下代码： ```html ```这里的`@`符号是`vue-cli`默认配置的别名，代表`src`目录，`type="text/javascript"`是为了避免浏览器按JSONP处理。 - **位置3：**如果外部库在全局作用域中定义了变量，如`Swiper`，则可以在Vue组件的`mounted`生命周期钩子中使用： ```javascript mounted() { //防止ESLint严格模式下报错，再次调用全局变量window.Swiper; //或者this.Swiper，取决于你的ESLint配置} ```这样，你就可以在Vue组件内部使用`Swiper`了。 2. **使用Webpack的externals配置**： -在`vue.config.js`文件中，你可以配置Webpack的`externals`属性，告诉Webpack将某个库视为全局变量处理，而不是尝试去解析和打包它。例如，对于`Swiper`库，可以这样配置： ```javascript module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.externals = { Swiper: 'window.Swiper' }; } } }; ``` -然后在HTML模板中，通过``标签引入`externalLib.js`： ```html ``` -这样，Webpack在编译时会认为`Swiper`是一个全局变量，不会尝试去打包它，避免了重复引入和加载问题。注意，使用`externals`配置时，确保外部库在Vue组件渲染之前已经被加载。通常，在生产环境中，我们会从CDN引入这些库，而在开发环境中，可能需要手动引入，或者使用某种自动加载机制。总结，通过直接引用或Webpack的`externals`配置，我们可以顺利地在Webpack+Vue-cli项目中引入非模块格式的外部JavaScript库。这种方法适用于那些未开源或者不方便通过npm安装的库，帮助我们更好地管理和整合项目资源。在实际开发中，应根据项目需求和资源可用性灵活选择适合的引入方式。