问题描述:全局引用jquery打包到线上可能会不好使。

第一步:

var path = require('path')
var webpack = require('webpack') function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: './src/main.js',
externals: {
'BMap': 'BMap',
// 'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
// include: [resolve('src'), resolve('test'),resolve('/node_modules/swiper/dist')]
// include: [path.resolve('src'), path.resolve('test'),path.resolve('node_modules/bootstrap-vue/lib')],
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery",
})
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
// '@': resolves('src'),
'@': path.resolve('src'),
'swiper': 'swiper/dist/js/swiper.js',
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
},
performance: {
hints: false
},
devtool: '#eval-source-map'
} if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery",
})
])
}

第二部:在main.js里

import $ from 'jquery';

解决问题:出现这个问题是只在plugins:里引入了没有在打包时候引用,要在生产环境里加上

new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery",
})

vue 全局引用jq(打包后可能会遇到的问题)的更多相关文章

  1. vue单页面应用打包后相对路径、绝对路径相关问题

    原文链接:  vue单页面应用打包后相对路径.绝对路径相关问题展开       在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过web ...

  2. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  3. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  4. 记录下自己VUE项目用Hbuider打包后启动白屏问题

    刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...

  5. vue css背景图片打包后路径问题

    limit,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 name,后面是打包后的路径: loader,后面 limit 字段代表图片打包限制,这个限制并不是说 ...

  6. vue项目使用hbuilder打包后,真机测试白屏

    在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an ...

  7. vue-cli 引用elementUI打包后文件过大

    解决方案:使用externals引用第三方资源,防止element资源被打包到自己项目中,(总共修改3个页面index.html.webpack.base.conf.js.main.js) 1.修改i ...

  8. Vue项目创建build打包后可修改的配置文件

    需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置. 实现方法如下: 1.在项目的static目录下创建project.config.json文件(名称随意,建 ...

  9. vue -- vue-cli webpack项目打包后自动压缩成zip文件

    用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...

随机推荐

  1. Linux的用户与用户组(权限管理)

    linux用户与用户.权限管理 用户管理: 1.useradd 创建用户 -c 指定用户描述 -d 指定家目录 默认家目录 /home下同名的目录 -g 指定主组 -G 指定附加组 [注意:一个用户主 ...

  2. Inversions After Shuffle CodeForces - 749E (概率,期望)

    大意: 给定一个$n$排列, 随机选一个区间, 求将区间随机重排后整个序列的逆序对期望. 考虑对区间$[l,r]$重排后逆序对的变化, 显然只有区间[l,r]内部会发生改变 而长为$k$的随机排列期望 ...

  3. element-ui使用el-tabs组件的时候浏览器直接卡死的问题

    遇到这个问题的原由是:本身自己项目的elementUI版本是2.0.11较低了,项目有个功能是自定义progress进度条颜色,无奈高版本的才有这个配置,所以就升级了elementUI,升级到了最高版 ...

  4. PHP trait与单例模式 (一次编写,到处使用)

    一  trait php是单继承的语言,无法同时从两个基类中继承属性和方法,为了解决这个问题,php出了Trait这个特性. 个人理解的trait是: trait = abstract class - ...

  5. JSP的9大内置对象和4打作用域对象

    一.9大内置对象 二.4大内置作用域对象

  6. vue.js 分页加载,向上滑动,依次加载数据。

    export default { layout: 'default', data(){ return{ page:1, pageSize:10, orderListArr:[], prodListLo ...

  7. Android判断是debug还是release模式

    1.当有些功能不希望在release模式实现时,但是debug模式又需要的时候,就可以对当前版本模式进行判断.如是debug模式则日志输出级别设置为Level.DEBUG,release模式设置为Le ...

  8. 关于导航自定义视图距离边界问题,点击状态栏TableView不能回滚到顶部问题

    一: 默认Navigation的自定义customView,设置为 Left or Right BarButtonItem 的时候会 与屏幕边界有个15像素的距离. 导致自定义视图的上的子视图响应区域 ...

  9. GPT-2,吓坏创造者的「深度造假写手」

    简评: 今年二月份刷屏的 GPT-2 着实厉害,那个生成续写故事的例子更是效果好到吓人一跳,它到底有多厉害,本文略微讲讲.更详细的信息可参考文末 OpenAI 的博客链接. 你能从下面这两段文字里品味 ...

  10. Access数据库删除重复记录,只保留一条记录的做法

    Access数据库删除重复记录,只保留一条记录的做法: 只保留id最小的记录方法: delete from [表名] where id not in (select min(id) from [表名] ...