How to ignore a third-party library in vue-cli3.0 build

requirements: the normal import in the component introduces a third-party package;

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

when you run npm run build, you want the ceisum package to be ignored and not entered. The following figure shows the configuration file of webpack, but it does not take effect. How to configure

Jul.11,2022

sounds a little messy. Seems to be trying to use cdn for online cdn but not locally?
https://www.jianshu.com/p/9d6...
this may help you


your config.externals configuration is not added to the returned result, is it?

    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 is a variable that determines the environment


after checking the information for a day, I finally solved it. Post a solution for partners with the same needs to use

reference to third-party libraries in 1.main.js

//main.js
import Cesium from 'cesium/Cesium'//

2.vue.config.js (without creating a new one in the root directory), fill in the following code

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'CesiumCesium
          "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: I set alias in the project. If you use this place, you can modify it according to your needs

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

then build directly.
reference link: https://blog.csdn.net/qq_1524...

Menu