Nuxt.js如何根据Webpack构建模式切换使用两个不同的.js脚本文件

原有配置失效原因 #

static目录下的资源属于Nuxt的静态资源，构建时会直接完整复制到输出目录，不会经过Webpack的module编译流程，因此你在webpack.extend中添加的exclude规则不会对static下的文件生效，另外你添加的规则仅指定了test和exclude，没有关联对应loader，本身也不会产生实际作用。

方案1：推荐使用环境变量直接注入API地址（无需维护两份脚本） #

你原本的需求就是区分开发和生产环境的API地址，Nuxt本身已经支持环境变量能力，完全不需要单独维护两份脚本文件：

1. 在项目根目录新建.env.development和.env.production两个文件，分别写入对应环境的API配置：

# .env.development 开发环境配置
API_URL=你的开发环境API地址

# .env.production 生产环境配置
API_URL=你的生产环境API地址

2. 你现有的nuxt.config中已经配置了env字段注入API_URL，直接在业务代码中通过process.env.API_URL调用即可，完全不需要引入额外的配置脚本。

方案2：如需保留两份脚本文件，可通过动态引入实现 #

方式A：配置head动态加载static目录脚本 #

直接修改nuxt.config，在head配置中根据环境判断加载对应脚本，不需要修改webpack配置：

export default {
  // 保留你原有其他配置
  head: {
    // 其他head配置比如title、meta之类的保留
    script: [
      process.env.NODE_ENV === 'development' 
        ? { src: '/script-dev.js' } // static目录下的文件直接通过根路径访问
        : { src: '/script.js' }
    ]
  },
  // 你原来写的build.extend那段可以完全删掉
}

方式B：移动脚本到assets目录动态引入 #

如果你的脚本需要经过Webpack编译处理，可以把两个脚本从static目录移动到assets/js目录下，在需要引入脚本的位置（比如全局插件、页面组件中）动态判断引入：

// 比如在plugins/load-script.js中
if (process.env.NODE_ENV === 'development') {
  import('~/assets/js/script-dev.js')
} else {
  import('~/assets/js/script.js')
}

然后在nuxt.config的plugins数组中注册这个插件即可。

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