之前我是在main.js直接引入的jQuery
//import './assets/js/jQuery-2.1.4.min.js
后来不知为什么页面总是提示$ undefind
后来就换成安装jquery
第一步:npm install jquery @2.1.4
第二步:配置插件
vue.config.js
const path = require('path');
const webpack = require('webpack')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: '/', // 根路径 /pages/dist/
//publicPath: '/pages/dist',
productionSourceMap: false,
outputDir: 'dist', // 构建输出目录
assetsDir: 'assets', // 静态资源目录
lintOnSave: false, // 是否开启eslint保存检测,有效值:true || false || 'error'
devServer: {
open: false, // 项目运行后是否自动打开浏览器
host: 'localhost',
//host: 'ip',
//port: 8081,
https: false,
hotOnly: false, // 热更新
proxy: {
// 配置跨域
'/api': {
//target: 'http://localhost:8080',
wx: true,
changeOrigin: true,
pathRewrite: {
//'^/api': '/mock'
'^/api': '/appi'
}
}
},
},
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
]
},
configureWebpack: config => {
config.resolve = {
extensions: ['.js', '.vue', '.json',".css"],
// 配置路径别名
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles')
}
}
}
};
在需要的.vue页面引入,如果能正常打印$ 说明安装成功
import $ from 'jquery'
mounted () {
console . log ( $ )
}