Laravel-Vite 编译 scss 和 js 以分离 public/asset 文件夹答案

【问题标题】：Laravel-Vite compile scss and js to seperate public/asset folderLaravel-Vite 编译 scss 和 js 以分离 public/asset 文件夹
【发布时间】：2023-01-12 14:23:29
【问题描述】：

所以之前，使用 laravel MIX，在 webpack.mix.js 文件中，你可以写

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/header.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/main.scss', 'public/css')
    .sass('resources/sass/header.scss', 'public/css')

它将被单独编译为public/asset。就像 JS 文件将被编译为 public/asset/js 而 sass 文件将被编译为 public/asset/css。当您将文件放入视图中的 blaze.php 的 head 时，您只需编写

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<link rel="stylesheet" href="{{ asset('css/header.css') }}">

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/header.js') }}"></script>

我如何将它与现在的 Laravel-Vite 结合起来？因为当我运行 npm run dev 时，单独的文件 scss 和 js 只是一起编译在一个文件夹中，即 public/build/assets/。关于js文件是否转到js文件夹和scss文件是否转到css文件夹，它们没有分开。

这是它在我的vite.config.js 中的样子

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/sass/main.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

【问题讨论】：

标签： laravel laravel-blade vite laravel-vite

【解决方案1】：

在 Laravel 中，您可以使用 Vite 开发服务器编译 SCSS 和 JavaScript 文件，并将它们输出到单独的公共资产文件夹。以下是完成此操作的步骤：

运行命令npm install -D vite安装Vite开发服务器。在 package.json 文件中为 Vite 创建一个新脚本。例如：

"scripts": {
    "vite": "vite"
  }

在项目的公共目录中创建一个名为“assets”的新文件夹，用于存储已编译的 CSS 和 JavaScript 文件。在项目的根目录中创建一个名为 vite.config.js 的新文件。在此文件中，您可以配置 Vite 以将编译后的 CSS 和 JavaScript 文件输出到“assets”文件夹。例如：

module.exports = {
  assetsDir: 'assets',
  css: {
    extract: true,
  },
  js: {
    entry: 'resources/js/app.js',
    transform: '^.+\.js$',
    output: 'assets/js/app.js',
  },
}

在您的 .env 文件中，将 MIX_ASSET_URL 设置为资产文件夹的路径，

MIX_ASSET_URL=http://localhost:8000/assets

使用命令 npm run vite 运行 Vite 开发服务器。这将启动服务器并将您的 SCSS 和 JavaScript 文件编译到“assets”文件夹。您现在应该能够使用 laravel 提供的 asset() 函数在您的 blade 文件中引用您编译的 CSS 和 JavaScript 文件，例如：

<link href="{{ asset('assets/css/app.css') }}" rel="stylesheet">
<script src="{{ asset('assets/js/app.js') }}"></script>

请注意，也可以使用像 webpack 这样的构建工具来处理资产的编译，但 Vite 是一个简单易用的开发选项。

【讨论】：