Vue项目修改资源目录路径及多厂商资源加载方案咨询

Let's break down your problem and walk through practical solutions to load the correct vendor assets based on an environment variable, while avoiding bundling unused resources.

Core Issue Recap #

You want to:

• Load assets from src/assets/vendorX when VUE_APP_VENDOR=vendorX is set, and src/assets/vendorY when the variable is vendorY
• Prevent Vue CLI from bundling all vendor directories (since renaming to vendors made it include everything in src)

Solution 1: Environment Variable + Dynamic require() + Webpack IgnorePlugin #

This is the most straightforward approach, combining dynamic imports with webpack's ability to exclude unused files.

Step 1: Set Up Environment Variables

First, define scripts in your package.json to pass the vendor variable:

"scripts": {
  "serve:vendorX": "VUE_APP_VENDOR=vendorX vue-cli-service serve",
  "serve:vendorY": "VUE_APP_VENDOR=vendorY vue-cli-service serve",
  "build:vendorX": "VUE_APP_VENDOR=vendorX vue-cli-service build",
  "build:vendorY": "VUE_APP_VENDOR=vendorY vue-cli-service build"
}

Note: On Windows, use set VUE_APP_VENDOR=vendorX && vue-cli-service serve instead.

Step 2: Dynamically Load Assets in Your Code

Use the environment variable to construct asset paths with require() (webpack can statically analyze this if the variable is set at build time):

In Vue templates:

<template>
  <div>
    <img :src="require(`@/assets/${process.env.VUE_APP_VENDOR}/logo.png`)" alt="Vendor Logo">
  </div>
</template>

In JavaScript:

const vendorStyles = require(`@/assets/${process.env.VUE_APP_VENDOR}/styles.css`);
const vendorData = require(`@/assets/${process.env.VUE_APP_VENDOR}/config.json`);

In CSS/SCSS (use the ~ prefix to resolve aliases):

.vendor-bg {
  background: url(~@/assets/${process.env.VUE_APP_VENDOR}/background.png);
}

Step 3: Exclude Unused Vendor Directories

To prevent webpack from bundling all vendor folders, add IgnorePlugin to vue.config.js to exclude everything except the current vendor's directory:

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

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.IgnorePlugin({
        // Match any asset path under src/assets that doesn't start with the current vendor
        resourceRegExp: new RegExp(`^@/assets/(?!${process.env.VUE_APP_VENDOR})`),
        contextRegExp: path.resolve(__dirname, 'src')
      })
    ]
  }
};

Solution 2: Restrict Resource Rules with chainWebpack #

If you want more control over how webpack processes assets, you can modify the built-in rules to only include the active vendor directory.

Update vue.config.js:

const path = require('path');

module.exports = {
  chainWebpack: config => {
    const activeVendorDir = path.resolve(__dirname, `src/assets/${process.env.VUE_APP_VENDOR}`);

    // Restrict image processing to the active vendor directory
    config.module.rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .include.clear()
      .add(activeVendorDir)
      .end();

    // Do the same for fonts
    config.module.rule('fonts')
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
      .include.clear()
      .add(activeVendorDir)
      .end();

    // Repeat for other asset types (svg, media, etc.) as needed
  }
};

This tells webpack to only process assets inside the active vendor folder, ignoring all others in src/assets.

Key Notes #

• Environment Variable Prefix: Always use VUE_APP_ as the prefix for custom environment variables—Vue CLI automatically injects these into your app.
• Static Path Analysis: When using dynamic require(), the base path must be static (webpack can't resolve fully dynamic paths). Using the environment variable works because it's set at build time.
• Testing: Run the corresponding script (e.g., npm run serve:vendorX) to verify the correct assets are loaded and unused directories aren't bundled.

内容的提问来源于stack exchange，提问作者Gilian