Vue-cli3 $ is not defined錯誤問題及解決

更新時間：2024年07月31日 15:06:44 作者：m0_37779749

這篇文章主要介紹了Vue-cli3 $ is not defined錯誤問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue-cli3 $ is not defined錯誤

錯誤原因

該錯誤是未安裝JQuery依賴包導(dǎo)致。

解決方案

安裝依賴包

1.執(zhí)行安裝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文件里導(dǎo)入jQuery

在使用了jquery的.vue文件中導(dǎo)入jQuery

import $ from 'jquery'

4.配置完成，啟動項目

npm run dev

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

錯誤原因

很明顯是沒有安裝jquery依賴包導(dǎo)致的。

解決辦法

安裝/導(dǎo)入jquery依賴包

npm install jquery --save
//		或者使用淘寶鏡像
cnpm install jquery --save

配置文件

舊版本的話，是需要在webpack.base.conf.js（與public和src文件同級之前的版本）里面修改配置文件，這個文件現(xiàn)在在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" 
    }) 
  ]

現(xiàn)在版本的話，直接在src與public文件夾同級目錄下建立vue.config.js文件（其中應(yīng)該是類似配置代理的文件，具體的話不太懂，參考其他文章）

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

var webpack = require('webpack')

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

在main.js中全局導(dǎo)入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"
  },