Vue项目中生产环境排除指定JavaScript文件的问题及实现方案

针对你提出的两个核心问题，先给出明确解答，再分享已验证的实操方案：

你的问题解答 #

1. Webpack生产构建是否会包含未被引用的文件？ #

Webpack在生产模式下会通过**树摇（Tree Shaking）**和依赖分析处理文件：如果一个JS文件既没有被任何模块静态导入，也没有被设置为入口文件，webpack会直接忽略它，不会将其打包到dist目录中。但要注意：静态import语句不能放在条件判断里（这属于ES模块语法错误），而动态import()如果在生产环境分支不会执行，webpack可能会生成单独的chunk但不会被加载，不过这种方式不如静态导入高效。

2. 能否配置Webpack区分开发/生产环境的文件？ #

当然可以！有多种方式实现，比如用resolve.alias结合环境变量动态指向文件、使用IgnorePlugin排除特定文件，或者通过webpack-chain修改配置。其中别名动态指向的方式最直观、易维护，也是我验证成功的方案。

已验证的实操步骤 #

下面是具体的实现流程，亲测有效：

1. 创建环境专属的JS文件 #

在src/assets/js/目录下创建两个功能一致但内容不同的文件：

• 生产环境文件 auth-production.js：

export const auth = { 
  authLink: "http://production.authlink/something/v1/", 
  authText: "Production Mode" 
}

• 开发环境文件 auth-development.js：

export const auth = { 
  authLink: "http://localhost:8080/something/v1/", 
  authText: "Development Mode" 
}

2. 修改Vue CLI的Webpack配置 #

在项目根目录的vue.config.js中，通过环境变量process.env.NODE_ENV动态拼接文件路径，定义别名：

const path = require('path');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'conditionalAuth': path.resolve(__dirname, `src/assets/js/auth-${process.env.NODE_ENV}.js`)
      }
    }
  }
}

小提示：如果之前遇到path is undefined的错误，只要在文件顶部引入path模块就能解决。

3. 在Vue组件中统一导入 #

在需要使用的组件（比如HelloWorld.vue）中，通过别名导入，无需手动区分环境：

<script>
import * as auth from 'conditionalAuth';
export default {
  name: 'HelloWorld',
  data(){
    return {
      auth: auth
    }
  }
}
</script>

4. 在模板中使用导出内容 #

直接在组件模板里使用导入的auth对象即可：

<template>
  <div>
    <p>You are in the {{ auth.auth.authText}}</p>
    <p>{{ auth.auth.authLink }}</p>
  </div>
</template>

最终效果 #

• 运行npm run serve时，自动加载auth-development.js，页面显示开发环境内容；
• 执行npm run build后，检查dist目录的构建产物，会发现auth-development.js完全没有被打包，只有生产环境的代码被整合到chunk中。

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