仅在 Vue CLI 应用程序的开发中包含客户端 npm 依赖项

Question

我想知道是否可以在我的客户端代码中包含 npm 依赖项，但仅限于开发阶段。

我有一些 API 模拟代码，我只想运行开发：

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import { Server } from "miragejs";

Vue.config.productionTip = false

if (process.env.NODE_ENV === 'development') {
  new Server()
}

new Vue({
  render: h => h(App),
}).$mount('#app')

我希望 npm 依赖项 miragejs 从我的生产构建中获得 tree-shaking，以及开发块中的代码。

这可能吗？或者，是否有更惯用的方式在特定环境中仅包含特定 npm 资产？

Answer 1

下拉到您的 vue.config.js 文件（类似于 webpack.config.js！）并覆盖部分配置。你可以搞乱加载器，或者在开始时连接一些文件。

您有两个选择：chainWebpack 或 configureWebpack（如果 process.env.NODE_ENV !== 'PRODUCTION'）

configureWebpack 接受一个对象字面量。我发现作为初学者更简单。
chainWebpack 是 returns 修改配置的功能。它有一个相当复杂的 API (here)

vue-cli docs for both of those options

// vue.config.js
module.exports = {
    // sometimes I just require my webpack files here...
    // require('./webpack.config.js')
    // There are some webpack config merge plugins available, I don't remember the names of them.
    configureWebpack: process.env.NODE_ENV !== 'PRODUCTION' ? devOnlyConfig : {},
    chainWebpack: (config) => {
        if (process.env.NODE_ENV !== 'PRODUCTION') { /* modify config! */ }
        return config;
    }
}

Answer 2

有点晚了，但我在自己的 Vue.js 应用程序中的做法是

if(process.env.NODE_ENV === 'development') {
  const { SERVER } = require('miragejs'); // instead of import
  new Server();
}

仅在 Vue CLI 应用程序的开发中包含客户端 npm 依赖项

Include a client side npm dependency in development only in a Vue CLI app

vue.js

vue-cli