问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ElemntUI使用DllPlugin打包后Tooltip不生效

头像
zhaokuohaha
    1928

    在使用Vue开发项目的过程中, 发现项目打包比较慢, 于是使用DllPlugin进行预打包
    参考方案: https://juejin.im/entry/598bc...
    将依赖库打包成dll来引用

    打包完成之后在index.html中引入dll, 发现其他库运行正常, 包括ElementUI的其他组件也运行正常, 但是Tooltip组件却不起作用.

    如果不打包ElementUI到Dll中, Tooltip 是可以正常使用的

    有朋友遇到过这个情况么, 或者说有人知道为什么会这样么?

    打包配置代码如下:

    • webpack.dll.conf.js

    const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
// 如果把 element-ui 从数组中移除的话, Tooltip 组件能够正常使用
    vendor: ['vue/dist/vue.esm.js', 'vue-router','vuex', 'axios', 'underscore'],
  },
  output: {
    path: path.join(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'       // vendor.dll.js中暴露出的全局变量名
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library',
      context: path.resolve(__dirname, '..')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

    • webpack.base.conf.js

    var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
    entry: {...},
    output:{...},
    resolve: {...},
    module: {...},
    plugins: [
    new webpack.DllReferencePlugin({
        context: path.resolve(__dirname, '..'),
        manifest: require('./vendor-manifest.json')
    }),
  ]
}

    • index.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./static/js/vendor.dll.js"></script>
  </body>
</html>
    vue.jselement-uiwebpackdllvue-cli
    阅读 8.5k
    5 个回答
    得票最新
    头像
    小艾
      11327

      我也出现这样的问题 坐等解答!

      头像
      此顾客加送小礼品
        11
        新手上路，请多包涵

        https://github.com/ElemeFE/el...
        按楼主提的issue里，统一工程中的alias配置vue$解决。

        webpack.dll.conf.js 与 vue.config.js 或者 webpack.base.config.js 等保持上一致。

          resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    }
  },
        头像
        gump
          31
          新手上路，请多包涵

          我也遇到这个问题。
          思路1，将css也放入dll打包中，失败。
          思路2，将css放入index.html中，不合理，需要拷贝element的css文件到静态文件夹中，或者通过cdn引用，反正不合理。
          思路3，将element-ui不放入dll打包中，成功。

          分析原因，必须先加载element-ui，随后加载index.css el-tooltip才有效。而tooltop是相对于body定位的，等我研究出方案或者原理，再来回答这个答案，先占一个坑

          头像
          hello_world
            21
            新手上路，请多包涵

            你打包的dll文件里面是不是有两个vue模块，如果是有两个vue模块那就是webpack.dll.conf.js的配置文件有问题

            const path    = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const libraryName = 'vendor_lib'
let config = {
    entry: {
        vendor: ['vue/dist/vue.esm.js', 'vue-router','element-ui','axios']
    },
    output: {
        path: path.join(__dirname, '../static/js'),
        filename: '[name].dll.js',
        library: libraryName
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        new webpack.DllPlugin({
            path: path.join(__dirname, '../', '[name]-manifest.json'),
            name: libraryName,
            context: __dirname,
        }),
        new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                warnings: false
              }
            },
            sourceMap: true,
            parallel: true
        }),
        // new CompressionWebpackPlugin({
        //     asset: '[path].gz[query]',
        //     algorithm: 'gzip',
        //     test: /\.(js|css)$/,
        //     threshold: 10240,
        //     minRatio: 0.8
        // })
    ]
};
if(process.env.npm_config_report){
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    config.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = config;

            用这份配置文件打包看下问题还存不存在，指定vue的版本（vue/dist/vue.esm.js）和打包的环境

            //设置打包环境
new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify('production')
    }
}),
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题