跟平常的引入是类似的,只是需要在配置文件中再加入一段。之前感觉很简单就没有写,但是用的时候总是要去搜一下,不如干脆自己记录一下,如下:
先安装
npm install jquery --save
在vue.config.js 文件中配置
因为vue-cli从3.0开始就没有config文件了,这里提供一个模板
var webpack = require('webpack')
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件需要npm安装
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
lintOnSave: 'error', // 设置eslint报错时停止代码编译
productionSourceMap: false, // 不需要生产环境的 source map(减小dist文件大小,加速构建)
devServer: {
open: true, // npm run serve后自动打开页面
host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0)
port: 8989, // 开发服务器运行端口号
proxy: {
'/api': {
target: 'http://www.exaple.com', // 代理接口地址
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '' //需要rewrite的, 这里理解成以'/api'开头的接口地址,把/api代替target中的地址
}
}
}
},
chainWebpack: (config) => {
// 移除 prefetch 插件(针对生产环境首屏请求数进行优化)
config.plugins.delete('prefetch')
// 移除 preload 插件(针对生产环境首屏请求数进行优化) preload 插件的用途:https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
config.plugins.delete('preload')
// 第1个参数:别名,第2个参数:路径 (设置路径别名)
config.resolve.alias
.set('@pages', resolve('./src/page'))
.set('@router', resolve('./src/router'))
.set('@store', resolve('./src/store'))
.set('@utils', resolve('./src/utils'))
},
// 配置打包 js、css文件为.gz格式,优化加载速度 (参考:https://blog.csdn.net/qq_31677507/article/details/102742196)
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
],
performance: { // 生产环境构建代码文件超出以下配置大小会在命令行中显示警告
hints: 'warning',
// 入口起点的最大体积 整数类型(以字节为单位,默认值是:250000 (bytes))
maxEntrypointSize: 5000000,
// 生成文件的最大体积 整数类型(以字节为单位,默认值是:250000 (bytes))
maxAssetSize: 3000000
// // 只给出 js 文件的性能提示
// assetFilter: function (assetFilename) {
// return assetFilename.endsWith('.js')
// }
}
}
}
}
}
在文件的头部位置加上const webpack = require(‘webpack’),然后在module.exports中,添加
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
在main.js文件中引入
import $ from 'jquery'
Vue.prototype.$ = $
组件中调用的时候通过this.$方式
tip:
如果产生报错ReferenceError: $ is not defined
main.js中引入(挂载对象不同)
import $ from 'jquery';
window.jQuery = $;
window.$ = $;