el-upload上传进度条不显示问题解决

freezingsun 7月 10, 2019 vuejs el-upload上传进度条不显示问题解决已关闭评论

main.js中加载的内容

window.$ = $
window.jQuery = $
import 'bootstrap/dist/js/bootstrap.min.js'
import 'font-awesome/css/font-awesome.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'admin-lte/dist/css/AdminLTE.min.css'
import 'admin-lte/dist/css/skins/_all-skins.min.css'
import 'admin-lte/dist/js/adminlte.min.js'
import clipboard from 'clipboard'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'admin-lte/bower_components/jquery/dist/jquery.min.js'

由于加载了bootstrap.min.css，导致进度条不显示，注释掉 bootstrap.min.css 即可。

import $ from 'jquery'
window.$ = $
window.jQuery = $
import 'bootstrap/dist/js/bootstrap.min.js'
import 'font-awesome/css/font-awesome.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'admin-lte/dist/css/AdminLTE.min.css'
import 'admin-lte/dist/css/skins/_all-skins.min.css'
import 'admin-lte/dist/js/adminlte.min.js'
import clipboard from 'clipboard'
//import 'bootstrap/dist/css/bootstrap.min.css'
import 'admin-lte/bower_components/jquery/dist/jquery.min.js'

其次，由于 admin-lte 依赖 jquery，需要在以下几个地方进行配置。

首先在 main.js 中加载 jquery

import $ from 'jquery'
window.$ = $
window.jQuery = $

其次，修改webpack.base.conf.js文件，添加如下

const vueLoaderConfig = require('./vue-loader.conf')
const webpack = require('webpack') //新增
entry: {
    app: './src/main.js'
  },
//以下为新增
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ],

这样就解决了 admin-lte 显示不正常的问题了。

参考：https://huanqiang.wang/2017/08/22/Vue%20%E6%95%B4%E5%90%88%20AdminLTE%20%E6%A8%A1%E6%9D%BF%E6%8C%87%E5%8D%97/

Comments are closed.