logo标签列表

能否在没有使用vue-cli的情况下构建Vue应用程序？

vue.jswebpackbuild
5
标题已经很清楚了。在不使用vue cli的情况下，是否可以通过webpack构建vue应用程序？ 如果不能，请说明原因。 据我所知，vue-cli也使用webpack来构建其文件。
请查看此教程，了解如何在没有vue-cli的情况下设置Vue v3项目：https://frontendguruji.com/blog/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli/ - Mandeep Pasbola
7个回答
5

当然可以。

vue-cli 在幕后使用了 Webpack，但它使用合理的默认设置来抽象出所有繁琐的 Webpack 配置，以便您专注于编写应用程序。

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

我通常对我希望我的网络应用程序如何构建有非常具体的要求，因此我选择 DIY Webpack 解决方案，以便我可以完全控制构建的所有方面。

如果您不想使用 vue-cli 但仍想使用 Webpack，则至少建议安装以下软件包：

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

我正在一个已有自定义Webpack配置的应用程序中使用Vue 3，没有使用Vue CLI，以下步骤适用于我：

安装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官方文档中我没有找到。

1

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

我的第一个非平凡Vue应用程序确实使用了webpack，但没有使用vue-cli。它是基于当时的一份指南手动配置的。

Vue-cli方便快速地启动构建过程，但它优化了那些非常熟悉node构建工具或不想太多干预默认设置的人。

1

是的，这是完全可能的...事实上，直到最近，很多项目都没有使用它！

1
是的，你可以在不使用Vue CLI的情况下向现有项目添加Vue功能。最好选择使用Webpack作为打包工具的项目...然后就很简单了。
你需要3个包：vue@next、@vue/compiler-sfc和vue-loader，并在webpack.config.js文件中添加一些规则配置。
请注意！目前你不能选择最新的官方vue-loader，因为它仍然依赖于vue-template-compiler（用于Vue 2）。你需要强制安装v16+（我使用的是vue-loader 16.8.3）以及最新的Vue v.3（3.2.28）... 这里提供了详细的描述说明如何操作。
-1

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

因此，默认情况下，webpack已经包含在Vue.js中了。

-3

2022年9月更新

请使用create-vue。

npm init vue@latest project-name

或者在您当前的目录中

npm init vue@latest .
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接