Question

我尝试将VueJs集成到Symfony 4.3中。

我已经安装了webpack-encore，vue vue-loader vue-template-compiler等。

一切正常。

我的操作系统是Windows10。我已经安装了nodejs和yarn。

    Documents>node -v 
    v12.4.0
    Documents>npm -v
    6.9.0
    Documents>yarn -v
    1.16.0

// webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore

.setOutputPath('public/build/')

.setPublicPath('/build')

.addEntry('app', './assets/js/app.js')


.enableVueLoader()

.splitEntryChunks()

.enableSingleRuntimeChunk()

.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())

.configureBabel(() => {}, {
    useBuiltIns: 'usage',
    corejs: 3
})

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');

}

module.exports = Encore.getWebpackConfig();

// app.js

import Vue from "vue";
import App from "./components/App";

console.log('abc');

new Vue({
    el: '#app',
    components: { App },
})

// App.vue

    <template>
        <h2>Welcome to Symfony 4 and vuejs</h2>
    </template>

    <script>
        export default {
        }
    </script>

    <style scoped>

    </style>

// index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Hello HomeController!{% endblock %}

{% block body %}
    <div id="app">
       <App> </App>
    </div>

{% endblock %}

// base.html.twig

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <script src="{{ asset('build/app.js') }}"></script>
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
    </html>

// HomeController.php

    class HomeController extends AbstractController
    {
        /**
         * @Route("/home", name="home")
         * @return Response
         */
        public function index()
        {
            return $this->render('home/index.html.twig', [
                'controller_name' => 'HomeController',
            ]);
        }
    }

当我使服务器运行时，一切正确，不是异常，而是注意显示。

D:\symfonyvue>npm run dev-server

> @ dev-server D:\symfonyvue
> encore dev-server

Running webpack-dev-server ...

 DONE  Compiled successfully in 3026ms

php bin/console server:run


 [OK] Server listening on http://127.0.0.1:8001


 // Quit the server with CONTROL-C.

访问http://127.0.0.1:8000/home


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello HomeController!</title>
                <script src="http://localhost:8080/build/app.js"></script>
    </head>
    <body>
            <div id="app">
       <App> </App>
    </div>

在Symfony 4中集成VueJs，无效

0 个答案: