vue 全局引用jq(打包后可能会遇到的问题)
Posted lst619247
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 全局引用jq(打包后可能会遇到的问题)相关的知识,希望对你有一定的参考价值。
问题描述:全局引用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(打包后可能会遇到的问题)的主要内容,如果未能解决你的问题,请参考以下文章
vue邪道玩法 : 把vue实例存在别的地方,以及可能会遇到的问题