Vue-webpack模板下如何将appConfig.js排除打包后单独引入？

Hey there! Let's walk through how to exclude your appConfig.js from the webpack bundle and add it separately post-build using the externals feature—this is exactly the right approach for your use case. Here's a step-by-step solution tailored to your Vue-webpack setup:

Step 1: Adjust appConfig.js to expose global variables #

Webpack's externals works by telling the bundler to skip packaging a module and instead look for it as a global variable in the browser. So we need to modify your config file to attach its values to the window object instead of using ES module exports:

// appConfig.js
const BASE_URL = 'apiurl';
const ACCOUNT = 'your-account-value'; // Replace with your actual value
const NOTIFICATIONS = 'your-notification-settings'; // Replace with your actual value

// Expose as a global variable
window.appConfig = { BASE_URL, ACCOUNT, NOTIFICATIONS };

Step 2: Configure webpack to exclude appConfig #

Next, we need to tell webpack that appConfig is an external dependency. Depending on your Vue-webpack setup:

For traditional vue-webpack template (webpack.base.conf.js) #

Open build/webpack.base.conf.js and add the externals property to the module.exports object:

// build/webpack.base.conf.js
module.exports = {
  // ... existing config (entry, output, module rules, etc.)
  externals: {
    // Key: the name you'll use to import the module
    // Value: the name of the global variable webpack will look for
    'appConfig': 'appConfig'
  }
}

For Vue CLI 3+ (vue.config.js) #

If you're using a newer Vue CLI project, create or update vue.config.js with:

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'appConfig': 'appConfig'
    }
  }
}

Step 3: Update import statements in your project #

Now, instead of importing from the relative path of appConfig.js, import it using the module name we defined in externals:

// Before (remove this)
// import { BASE_URL, ACCOUNT } from '../appConfig';

// After
import appConfig from 'appConfig';
const { BASE_URL, ACCOUNT } = appConfig;

// Use the variables as you normally would
console.log(`API Base URL: ${BASE_URL}`);

This keeps your code consistent while letting webpack know to skip bundling appConfig.

Step 4: Add appConfig.js to your dist folder after building #

Once you run npm run build to generate your production bundle:

1. Copy your modified appConfig.js into the dist directory (same folder as index.html).
2. Open dist/index.html and add a <script> tag to load appConfig.js before your main bundle script:

<!-- dist/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <!-- ... existing head content -->
  </head>
  <body>
    <div id="app"></div>
    <!-- Load appConfig first to make the global variable available -->
    <script src="./appConfig.js"></script>
    <!-- Then load your main bundle (filename may include a hash) -->
    <script src="./js/app.abc123.js"></script>
  </body>
</html>

Important Notes #

• Make sure the global variable name (appConfig) matches exactly between your appConfig.js and the webpack externals configuration—case sensitivity matters!
• If your project uses a publicPath in webpack config (for CDN or subdirectory deployment), adjust the src attribute of the <script> tag to match (e.g., <script src="/path/to/appConfig.js"></script>).
• You can modify appConfig.js anytime after build without needing to re-bundle your entire app—perfect for changing API URLs or other environment-specific variables.

内容的提问来源于stack exchange，提问作者J. Dusanic