时间戳

首页 > 解决方案 > 仅在 Vue CLI 应用程序的开发中包含客户端 npm 依赖项

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

问题描述

我想知道是否可以在我的客户端代码中包含 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 资产？

标签： vue.jsvue-cli

解决方案

下拉到您的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;
    }
}

推荐阅读