如何在Vue.js Webpack CLI项目中包含jQuery? [英] How to include jquery in a vuejs webpack cli project?
问题描述
您好,我曾经使用vuejs cli生成项目( https://github.com/vuejs/vue-cli ). cli使用webpack,在vue文件内部使用jquery时遇到问题.我总是得到一个.
Hello there i used to vuejs cli to generate a project (https://github.com/vuejs/vue-cli). The cli uses webpack and im having trouble using jquery inside of the vue files. Im always getting a.
http://eslint.org/docs/rules/no-undef '$' is not defined
我尝试编辑我的webpack.dev.config以包括如下所示的provider插件块:
I have tried editing my webpack.dev.config to include the provide plugin block as follows:
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin(),
new webpack.ProvidePlugin({
$ : "jquery",
jQuery : "jquery"
})
]
})
但是,当尝试使用jquery时,我一次又一次遇到相同的问题.我不反对为此使用CDN,无论我尝试什么,我真的都无法使这个想法包括jquery.
However when trying to use jquery i run into the same issues time and time again. Im not against using a cdn for this i really just cant get this think to include jquery no matter what i try.
如果vue文件很有帮助,我会尝试在脚本块内这样console.log $
If the vue file is helpful its i try to console.log $ like so inside the script block
<script>
export default {
name: 'how_can_we_help_you',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
console.log($)
</script>
请帮助我,我非常困惑,并且一直在设法解决此问题.预先感谢.
Please help im very stuck and have been trying to fix this for quite a wile now. Thanks in advance.
推荐答案
经过两天的搜索.它的eslintrc.js
After two days of searching. Its eslintrc.js
将其添加到以下内容中,它将修复提供插件.
add this to the following and it will fix the provide plugin.
env: {
browser: true,
jquery: true
},
这篇关于如何在Vue.js Webpack CLI项目中包含jQuery?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!