c语言编程笔录

首页 >   > 笔记大全

笔记大全

vue引入静态jquery报错如何解决

更新时间：2023-11-14
首先，在Vue中使用jQuery需要正确引入jQuery库文件，否则会出现报错。一般经常会遇到的情况是直接引入CDN，但引入的CDN地址是没有自己的域名的，被认为是安全风险，所以浏览器会阻止加载。如下所示：

CDN方式引入jQuery报错示例：

Console报错信息如下：

jquery.min.js:formatted:8593 Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-3.5.1.min.js'. This request has been blocked; the content must be served over HTTPS.
解决该问题的方法有两种，其一是使用本地jQuery文件，其二是使用webpack打包引入。下面将分别进行详细说明。 1. 使用本地jQuery文件 我们可以下载jQuery并将其保存到本地，然后再通过相对路径引入。示例代码如下：

本地方式引入jQuery示例：
这种引入方式需要将jQuery文件下载到本地并存储到指定目录，代码中的"./js/"就是指定的目录。这样引入虽然能够解决报错问题，但却需要手动下载和更新相关文件，比较繁琐。 2. 使用webpack打包引入 webpack是一个现代化的打包工具，它可以将多个文件进行打包压缩，不仅解决了前端资源引用问题，还可以实现代码分离、懒加载等功能。在使用vue-cli创建的项目中，也默认配置了webpack。我们可以通过webpack将jQuery打包压缩，并根据需要进行引入。具体步骤如下： （1）安装jquery和webpack 首先需要安装jquery和webpack。在命令行中执行以下命令： 
  npm install jquery --save
  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:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.(png|jpg|gif)$/i,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8192
                        }
                    }
                ]
            }
        ]
    }
}
其中，entry表示打包的入口文件，output表示打包后的文件名和存储路径，module.rules表示配置规则，这里主要配置了css和图片的打包规则。 （3）在Vue组件中引入jQuery 最后，在Vue组件中引入jQuery即可。示例代码如下：

webpack方式引入jQuery示例：

import $ from 'jquery';
export default{
    data(){
        return{
            message:'Hello World!'
        }
    },
    mounted(){
        $('body').css('background','#f0f0f0');
    }
}
该方法需要先通过npm安装jquery，然后在Vue组件中使用import命令引入。这种方式引入jQuery不需要手动更新文件，且可以打包压缩，提高页面性能。 综上所述，使用本地jQuery文件和使用webpack打包引入jQuery两种方式均可以解决vue引入静态jquery报错的问题。前者灵活性较高，后者可打包压缩，实现代码分离，选择哪种方式可以根据实际情况进行选择。

图文推荐