首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue-cli3 $ is not defined错误

Vue-cli3 $ is not defined错误问题及解决

2024-07-31 15:06:45 作者：m0_37779749

这篇文章主要介绍了Vue-cli3 $ is not defined错误问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue-cli3 $ is not defined错误

错误原因

该错误是未安装JQuery依赖包导致。

解决方案

安装依赖包

1.执行安装jquery依赖包命令

npm install jquery --save

2.查看package.json

在项目根目录下找到package.json文件，查看jquery是否安装成功

"dependencies": {
    "axios": "^0.18.0",
    "core-js": "^2.6.5",
    "jquery": "^3.5.1",
    "lrz": "^4.9.40",
    "moment": "^2.23.0",
    "qrcode2": "^1.2.3",
    "vant": "^2.2.16",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },

3.在.vue文件里导入jQuery

在使用了jquery的.vue文件中导入jQuery

import $ from 'jquery'

4.配置完成，启动项目

npm run dev

vue中引入jQuery&&&解决＄ is not defined

错误原因

很明显是没有安装jquery依赖包导致的。

解决办法

安装/导入jquery依赖包

npm install jquery --save
//		或者使用淘宝镜像
cnpm install jquery --save

配置文件

旧版本的话，是需要在webpack.base.conf.js（与public和src文件同级之前的版本）里面修改配置文件，这个文件现在在node_modules/@vue/cli-service/，寻找起来比较麻烦。

①在开头使用以下代码引入webpack，

var webpack = require('webpack')

②然后在module.exports中添加一段代码。

 plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery" 
    }) 
  ]

现在版本的话，直接在src与public文件夹同级目录下建立vue.config.js文件（其中应该是类似配置代理的文件，具体的话不太懂，参考其他文章）

然后后在建立好的文件中加入一下代码

var webpack = require('webpack')

module.exports = {
    lintOnSave: false,
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8000', //建立本地服务器端口可能不一样
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
            })
        ]
    }
}

在main.js中全局导入jquery

import $ from 'jquery'

vue2.0中如下

Vue.config.productionTip = false
new Vue({
    router,
    store,
    $, //添加该行即可
    render: h => h(App)
}).$mount('#app')

vue3.0中的createApp如下，使用use($)

createApp(App).use(router).use($).mount('#app')

最后查看package.json，可以看到版本号，正常使用即可

dependencies": {
    "axios": "^0.21.1",
    "bootstrap": "^5.0.2",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "jquery": "^3.6.0",
    "vue": "^3.1.5",
    "vue-router": "^4.0.10"
  },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

Vue-cli3 $ is not defined错误问题及解决