README

此模块帮助您在 Silverstripe 项目中使用 vite。当您进行正常的 vite 构建，会生成带有哈希的文件名。此模块帮助您从 manifest.json 中获取正确的文件名。

安装

composer require atwx/silverstripe-vitehelper

用法

在您的模板中，您可以使用以下代码

    $ViteClient.RAW
    <link rel="stylesheet" href="$Vite("app/client/src/scss/main.scss")">
    <script type="module" src="$Vite("app/client/src/js/main.js")"></script>

$ViteClient.RAW 将加载 vite 客户端。这是用于开发服务器的必需品。 $Vite 将从 manifest.json 中获取给定输入文件的正确文件名。

配置

您可以在您的 mysite.yml 中配置构建文件的存放位置

Atwx\ViteHelper\Helper\ViteHelper:
    manifest_path: "/app/client/dist/.vite/manifest.json"  # default
    output_url: "/app/client/dist/"  # default

manifest_path 是由 vite 生成的 manifest 文件的路径。 output_url 是输出文件夹的 URL。它将在资源文件夹名称之前添加，通常是 _resources。

开发模式

要使用开发模式的 vite，您需要在您的 .env 中添加开发服务器 URL

VITE_DEV_SERVER_URL=http://localhost:3000

编辑器 CSS

由于构建文件包含哈希，我们需要获取编辑器 CSS 的正确文件名。

您可以在您的 mysite.yml 中使用以下内容来获取正确的文件名

Atwx\ViteHelper\Helper\ViteHelper:
    editor_css: 'app/client/src/scss/editor.scss'

Vite 配置

我们通常为 vite 使用以下配置。这定义了

• 输入文件
  • main.js：主 JavaScript 的入口点
  • main.scss：主 CSS 的入口点
  • editor.scss：编辑器 CSS 的入口点，将在 CMS 中加载
• 开发服务器

重要的是 base 选项。如果您不设置它，默认为 /，这可能不会正常工作。

import {defineConfig} from 'vite'

// https://vite.vuejs.ac.cn/config/
export default defineConfig(({command}) => {
    return {
        server: {
            host: '0.0.0.0',
            port: 3000,
        },
        alias: {
            alias: [{find: '@', replacement: './app/client/src'}],
        },
        base: './',
        build: {
            outDir: './app/client/dist',
            manifest: true,
            sourcemap: true,
            rollupOptions: {
                input: {
                    'main.js': './app/client/src/js/main.js',
                    'main.scss': './app/client/src/scss/main.scss',
                    'editor.scss': './app/client/src/scss/editor.scss',
                },
            },
        },
        plugins: []
    }
})

部分灵感来源于 https://github.com/brandcom/silverstripe-vite