是否可以在没有 vue-cli 的情况下构建 vue 应用程序？答案

【问题标题】：Is it possible to build a vue application without vue-cli?是否可以在没有 vue-cli 的情况下构建 vue 应用程序？
【发布时间】：2020-03-24 23:14:52
【问题描述】：

就像标题本身所说的那样。是否可以在 webpack 的帮助下构建一个 vue 应用程序而无需 vue cli？如果不是，为什么？据我了解，vue-cli 也使用 webpack 来构建他们的文件。

【问题讨论】：

查看本教程以了解没有 vue-cli 的 Vue v3 设置：frontendguruji.com/blog/…

标签： vue.js webpack build

【解决方案1】：

是的，当然。

vue-cli 在后台使用 webpack，但它使用合理的默认值抽象出所有繁琐的 webpack 配置，因此您可以专注于编写应用程序。

如果您需要更改应用程序的构建方式，例如您想要压缩图像资产，那么除非vue-cli 为您的特定需求提供配置选项，否则您将不得不以某种方式更改 webpack 配置（例如添加新的加载器或更改现有加载器的配置等）。 vue-cli 确实公开了一些方法来做到这一点，但你并不能从一开始就完全控制 webpack 构建。

我通常对如何构建 Web 应用程序有非常具体的要求，因此我选择了 DIY webpack 解决方案，以便我可以完全控制构建的各个方面。

如果你不想使用vue-cli，但仍想使用 webpack，那么我至少建议以下包：

webpack
vue
vue-loader 用于编译和捆绑 .vue 单个文件组件
babel-loader 用于转译 JavaScript
file-loader 图片资源
style-loader 用于在运行时将样式注入 DOM
css-loader 用于加载 CSS 文件中引用的模块，如图像和字体

【讨论】：

【解决方案2】：

我在具有自定义 Webpack 配置的现有应用程序中使用没有 Vue CLI 的 Vue 3，以下步骤对我有用：

安装 Vue3：

npm install --save vue@next

安装vue-loader（v16 或更新版本）和新的模板编译器：

npm install --save-dev vue-loader@^16 @vue/compiler-sfc

Webpack 配置：

const { VueLoaderPlugin } = require('vue-loader'); // load plugin

//...

module: {
  rules: [
    {
        test: /\.vue$/,
        exclude: /(node_modules)/,
        use: [
          { loader: 'vue-loader' }
        ]
      }
  ]
},

plugins: [
  new VueLoaderPlugin()
]

感谢Webpack for Vue 3 提供关于在不使用 CLI 的情况下安装编译器的提示；我在 Vue 3 文档中找不到。

【讨论】：

【解决方案3】：

如果您愿意在浏览器支持的 JavaScript 的限制范围内工作，则根本不需要任何构建工具。 onboarding guide 根本不使用 vue-cli、webpack 甚至 Node。

我的第一个重要的 Vue 应用确实使用了 webpack，但没有使用 vue-cli。它是根据当时的操作指南中的建议手动配置的。

Vue-cli 可以方便地快速启动和运行构建过程，但它针对那些对节点构建工具非常熟悉或不想过多使用默认设置的人进行了优化。

【讨论】：

【解决方案4】：

是的，很有可能......事实上，直到最近，很多项目都是在没有它的情况下构建的！

【讨论】：

【解决方案5】：

是的 vue-cli 包含 webpack 来构建资产。现在，vue.js 做了同样的事情。 https://github.com/vuejs/vue/blob/dev/package.json这里是Vue.js的package.json，可以看到需要webpack。

所以默认情况下 webpack 包含在 Vue.js 中

【讨论】：