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 (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依赖项包括在开发中

2 个答案: