如何在开发服务器的Laravel v9.19中将任何js文件注入head标记内？

l5tcr1uw 于 2023-03-19 发布在其他

关注(0)|答案(2)|浏览(110)

我使用Laravel v9.19和Vite v4.0.0。当我使用@vite指令添加config.js文件时，它总是在所有html内容加载后执行。但是，我试图在所有html内容加载前执行config.js文件。目的是，我试图在body标签加载后立即访问配置值。有什么方法可以在head标签中包含config.js文件吗？
vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import VitePluginEntryInject from 'vite-plugin-entry-inject';

export default defineConfig({
    plugins: [
        VitePluginEntryInject({
            // head-prepend/head/body-prepend/body
            injectTo: 'head'
        }),
        laravel({
            input: [
                'resources/scss/theme.scss', 
                'resources/scss/user.scss', 
                'resources/js/config.js',
            ],
            refresh: true,
        }),
    ],
});

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
       
        @vite('resources/js/config.js')

    </head>
    <body>
      <script>
        console.log(window.config);
      </script>
    </body>
</html>

config.js

const config = {
  mode: 'dark'
}

window.config = config;

我想在头标记内加载config.js文件，这样我就可以在html marukup内访问配置值。

laravel

来源：https://stackoverflow.com/questions/75729885/how-to-inject-any-js-file-inside-head-tag-in-laravel-v9-19-in-development-server

2条答案

按热度按时间

33qvvth11#

您可以修改vite.config.js，添加构建部分，如下所示：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import VitePluginEntryInject from 'vite-plugin-entry-inject';

export default defineConfig({
    plugins: [
        VitePluginEntryInject({
            // head-prepend/head/body-prepend/body
            injectTo: 'head'
        }),
        laravel({
            input: [
                'resources/scss/theme.scss', 
                'resources/scss/user.scss', 
            ],
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            input: {
                main: './resources/js/main.js',
                config: './resources/js/config.js'
            },
        },
    },
});

因此，在blade文件中，您可以这样做

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <script type="module" src="{{ mix('assets/js/config.js') }}"></script>
    </head>
    <body>
      <script>
        console.log(window.config);
      </script>
    </body>
</html>

赞(0）回复(0）举报 2023-03-19

3htmauhk2#

试试这个：vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import VitePluginEntryInject from 'vite-plugin-entry-inject';

export default defineConfig({
    plugins: [
        VitePluginEntryInject({
            // head-prepend/head/body-prepend/body
            injectTo: 'head'
        }),
        laravel({
            input: [
                'resources/scss/theme.scss', 
                'resources/scss/user.scss', 
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

将此添加到您的app.js：

import './config.js'

赞(0）回复(0）举报 2023-03-19

我来回答

如何在开发服务器的Laravel v9.19中将任何js文件注入head标记内？

2条答案

相关问题

热门标签

最新问答