Javascript 文件在 symfony twig 中不起作用

Question

在我的 symfony 項目中，我的 css 鏈接良好，但我的 javascript 無法正常工作，我找不到原因。 我想我錯過了一些愚蠢的事情......，因為我正在運行 Sass，所以我嘗試使用 encore webpack，但我放棄並切換到 classi src=""

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {# Run `composer require symfony/webpack-encore-bundle`
           and uncomment the following Encore helpers to start using Symfony UX #}
        {% block stylesheets %}
{#            {{ encore_entry_link_tags('app') }}#}
{#            {{ encore_entry_script_tags('app') }}#}
           <link rel="stylesheet" href="{{ asset('bundles/mercuryseriesflashy/css/flashy.css') }}">
            <link rel="stylesheet" href="{{ asset('./build/app.css') }}">
        {% endblock %}

        {% block javascripts %}
{#            {{ encore_entry_script_tags('app') }}#}
            <!-- Flashy depends on jQuery -->



        {% endblock %}
    </head>
    <body>
    {% block navbar %} {% include 'inc/navbar.html.twig'%}{% endblock %}
        {% block body %}{% endblock %}
        {% block footer %}{% endblock %}
    <script src="{{ asset('./build/app.js') }}"></script>

    <script src="//code.jquery.com/jquery.js"></script>

    </body>
</html>

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.scss in this case)
import './styles/app.scss';

import './bootstrap';
// start the Stimulus application

const logoMenu = document.querySelector('.logoMenuImg');
const contItems = document.querySelector('.contItems');
const arrItems = document.querySelectorAll('.items');

console.log(logoMenu);
console.log(contItems);
console.log(arrItems);

console.log('arrItems');

alert('hello world');

謝謝您的幫助

ps：在inspector中它是空白的，沒有錯誤

Answer 1

如果您使用的是encore_entry_script_tags我假設您已在 webpack 配置中添加您的 JS 文件？ 我看到您正在使用資產，如果您使用的是 Symfony 4.4 及更高版本，請刪除它，它已被棄用。 使用 Webpack 安可。

let Encore = require('@symfony/webpack-encore');
let CopyWebpackPlugin = require('copy-webpack-plugin');
//let TerserPlugin = require('terser-webpack-plugin');

Encore
  // directory where compiled assets will be stored
  .setOutputPath('public/build/')
  // public path used by the web server to access the output path
  .setPublicPath('/build')

  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .addEntry('app', './assets/js/app.js')
  .enableSingleRuntimeChunk()
;
module.exports = Encore.getWebpackConfig();

並使用npm run build或yarn encore <env>運行查看文檔： https://symfony.com/doc/current/frontend.html

Javascript 文件在 symfony twig 中不起作用

問題描述

1 個解決方案

解決方案1
0 2021-02-17 09:56:03

Javascript 文件在 symfony twig 中不起作用

問題描述

1 個解決方案

解決方案1 0 2021-02-17 09:56:03

解決方案1
0 2021-02-17 09:56:03