从 Laravel Mix 迁移到 Vite

Question

我使用Laravel，并且我将Laravel升级到10。现在，我也想用Vite替换Webpack。我做正式的步骤，并且坚持一步。就我而言，我的 Webpack 配置是这样的：

const mix = require('laravel-mix');

mix
.js('resources/js/app.js', 'public/tmp/app.js').vue()
.scripts([
    'public/tmp/app.js',
    'resources/vuexy-assets/vendors/js/extensions/dropzone.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/datatables.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/datatables.buttons.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/dataTables.select.min.js',
    'resources/vuexy-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js',
    'resources/vuexy-assets/vendors/js/charts/apexcharts.min.js',
    'resources/vuexy-assets/js/core/app-menu.min.js',
    'resources/vuexy-assets/js/core/app.min.js',
    'resources/vuexy-assets/js/scripts/components.min.js',
    'resources/vuexy-assets/js/scripts/footer.min.js',
    'resources/vuexy-assets/js/scripts/extensions/toastr.min.js',
    'resources/vuexy-assets/vendors/js/extensions/toastr.min.js',
    'resources/vuexy-assets/js/scripts/ui/data-list-view.min.js',
    'node_modules/sweetalert2/dist/sweetalert2.all.min.js',
], 'public/js/app.js')
    
.styles([
    'resources/vuexy-assets/vendors/css/vendors-rtl.min.css',
    'resources/vuexy-assets/css-rtl/bootstrap.min.css',
    'resources/vuexy-assets/css-rtl/bootstrap-extended.min.css',
    'resources/vuexy-assets/css-rtl/pages/data-list-view.min.css',
    'resources/vuexy-assets/css-rtl/components.min.css',
    'resources/vuexy-assets/css-rtl/themes/semi-dark-layout.min.css',
    'resources/vuexy-assets/css-rtl/core/menu/menu-types/vertical-menu.min.css',
    'resources/vuexy-assets/css-rtl/custom-rtl.min.css',
    'resources/vuexy-assets/css-rtl/plugins/extensions/toastr.min.css',
    'resources/vuexy-assets/css-rtl/pages/app-chat.min.css',
    'resources/vuexy-assets/vendors/css/tables/datatable/datatables.min.css',
    'resources/vuexy-assets/css-rtl/colors.min.css',
    'resources/vuexy-assets/vendors/css/extensions/toastr.css',
    'resources/vuexy-assets/vendors/css/charts/apexcharts.css',
    'resources/css/videojs.css',
], 'public/css/app.css');

Webpack 将

resources/js/app.js

处理为

public/tmp/app.js

，然后将我所有的 JS 文件转换为一个文件，而无需对其他 JS 文件进行额外更改。另外，对于 CSS 文件，它将所有 CSS 文件合并为一个文件。现在我想将其转换为 vite 配置文件来做到这一点。

Answer 1

从 Laravel Mix 迁移到 Vite，需要按照以下步骤操作：

1. 在项目中安装 Vite 作为开发依赖：

npm install --save-dev vite

2. 在项目根目录中创建一个

   vite.config.js

   文件：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      input: 'resources/js/app.js',
      output: {
        entryFileNames: 'js/app.js',
        chunkFileNames: 'js/[name].js',
        assetFileNames: 'css/app.css'
      }
    }
  }
})

3. 更新您的

   package.json

   脚本：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

4. 运行构建命令：

npm run build

这将使用您构建的资产创建一个

dist

目录。

请注意，Vite 不支持像 Laravel Mix 那样将多个 JS 或 CSS 文件合并为一个文件。您需要在

app.js

文件或 Vue 组件中导入 JS 和 CSS 文件。

例如，在您的

app.js

文件中：

import 'resources/vuexy-assets/vendors/js/extensions/dropzone.min.js'
import 'resources/vuexy-assets/vendors/js/tables/datatable/datatables.min.js'
// import other JS files...

import 'resources/vuexy-assets/vendors/css/vendors-rtl.min.css'
import 'resources/vuexy-assets/css-rtl/bootstrap.min.css'
// import other CSS files...

另外请注意，Vite 对资产的处理方式有所不同。您可能需要调整资产路径或将资产移动到

public

目录。查看 Vite 文档了解更多详情。