只在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从我的产品构建中得到树的抖动，以及开发块中的代码。

这个是可能的吗？或者，是否有一种更惯用的方式只在某些环境中包括某些npm资产？

Answer 1

放到vue.config.js文件中(类似于webpack.config.js!)并覆盖配置的部分。您既可以处理加载程序，也可以在开始时连接一些文件。

您有两个选项：chainWebpack或configureWebpack (如果是process.env.NODE_ENV !== 'PRODUCTION')

• configureWebpack接受一个对象文本。作为初学者，我发现这更简单。
• chainWebpack是一个返回修改后的配置的函数。它有一个相当复杂的API (在这里)

这两个选项的vue-cli文档

// 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();
}