vue-cli3.0 build时如何忽略某个第三方库

Question

需求：组件中正常import引入第三方的包;

 import Cesium from 'cesium/Cesium'
 import widgets from 'cesium/Widgets/widgets.css'

运行npm run build时，希望ceisum这个包被忽略不被打进去，下图为webpack的配置文件，但没有生效，该如何配置

Answer 1

查了一天的资料，终于解决了，贴下解决方法，供同样需求的小伙伴使用

1.main.js中引用第三方库

//main.js
import Cesium from 'cesium/Cesium'//直接在组件中引用是无效的

2.vue.config.js(没有就在根目录下新建)中填写如下代码

configureWebpack: config => {
    let settings = {};
    if (process.env.NODE_ENV === 'production') {
      settings = {
        plugins: [
          new webpack.DefinePlugin({
            'CESIUM_BASE_URL': JSON.stringify('static')
          }),
          new CopyWebpackPlugin([{
            from: path.join(cesiumSource, cesiumWorkers),
            to: 'static/Workers'
          }]),
          new CopyWebpackPlugin([{
            from: path.join(cesiumSource, 'Assets'),
            to: 'static/Assets'
          }]),
          new CopyWebpackPlugin([{
            from: path.join(cesiumSource, 'Widgets'),
            to: 'static/Widgets'
          }])
        ],
        externals: {
        //属性名cesium/Cesium指的是  import Cesium from 'cesium/Cesium'中的
        //'cesium/Cesium'属性值Cesium指的是Cesium插件暴露出来的全局对象名。
          "cesium/Cesium": "Cesium" 
        }
      }

    } else {
      settings = {
        plugins: [
          new webpack.DefinePlugin({
            'CESIUM_BASE_URL': JSON.stringify('')
          }),
          new CopyWebpackPlugin([{
            from: path.join(cesiumSource, cesiumWorkers),
            to: 'Workers'
          }]),
          new CopyWebpackPlugin([{
            from: path.join(cesiumSource, 'Assets'),
            to: 'Assets'
          }]),
          new CopyWebpackPlugin([{
            from: path.join(cesiumSource, 'Widgets'),
            to: 'Widgets'
          }]),
        ]
      }
    }
    return settings
  }

ps：在项目中我设置了alias,如果用到这个地方按照需求自行修改即可

chainWebpack: config => {
    config
      .node.set('fs', 'empty').end()
      .resolve.alias.set('cesium', path.resolve(__dirname, cesiumSource)).end().end()
  }

接下来就直接build就可以了
参考链接：https://blog.csdn.net/qq_1524...

Answer 2

听着有点乱 貌似是试图线上cdn使用cdn 但是本地不使用？
https://www.jianshu.com/p/9d6...
这个可能对你有帮助

Answer 3

你的config.externals配置没有加到返回结果吧，

    configureWebpack: config => {
        //生产and测试环境
        let pluginsPro = [
            new vConsolePlugin({
                filter: [], 
                enable: true
            }),    
            new CompressionPlugin({ 
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$', ),
                threshold: 8192,
                minRatio: 0.8,
            })    
            new BundleAnalyzerPlugin(),
        ];
        //开发环境
        let pluginsDev = [
            new vConsolePlugin({
                filter: [], 
                enable: true
            }),        
        ];
        if(isPRO) { 
            config.plugins = [...config.plugins, ...pluginsPro];
        } else {
            config.plugins = [...config.plugins, ...pluginsDev];
        }
    },

isPRO是判断环境的变量