VueJS SSR V8JS Symfonybug Jquery

Question

我已经为 SSR 安装了 VueJS / Symfony 和 V8JS（SEO 友好） 安装 V8JS 没问题，但我与 Jquery 有冲突

V8Js::compileString():2246: TypeError: Cannot read property 'jquery' of undefined

我给你留下一些重要的代码。 我在某些事情上使用 Jquery 和 axios。

但我似乎对 Jquery 不太担心。 我想我需要添加一个配置以避免与 Jquery 冲突但无法知道该放什么

如果有人能解决我的问题，那就太好了

编辑代码：06-03-19

*WebPack Config JS（配置Webpack JS Encore）

let Encore = require('@symfony/webpack-encore');
 Encore
 // the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// uncomment to create hashed filenames (e.g. app.abc123.css)
// .enableVersioning(Encore.isProduction())

// uncomment to define the assets of the project
.addEntry('entry-client', './assets/js/entry-client.js')
.addEntry('entry-server', './assets/js/entry-server.js')
.addEntry('js/app', './assets/js/app.js')
.addEntry('css/app', './assets/css/app.scss')
// uncomment if you use Sass/SCSS files
.enableSassLoader()
// uncomment for legacy applications that require $/jQuery as a global variable
//.autoProvidejQuery()

// Enable Vue Loader
.enableVueLoader();

module.exports = Encore.getWebpackConfig();

app.js (App.js)

// require jQuery normally
const $ = require('jquery');
require('bootstrap');

global.axios = require('axios');

require('../css/app.css');
require('bootstrap-sass');


import Vue from 'vue';

import Motdepasse from './components/Motdepasse'

/**
 * Create a fresh Vue Application instance
*/
new Vue({
    el: '#app',
    components: {Motdepasse}
});

export function createApp() {
  return new Vue({
    render: h => h(Motdepasse)
  });
}

入门客户端

        import { createApp } from './app'
        createApp().$mount('#app');

入口服务器

        import { createApp } from './app'
    renderVueComponentToString(createApp(), (err, res) => {
      print(res);
    });

app.scss

@import '~bootstrap-sass/assets/stylesheets/bootstrap';
@import 'app.css';

app.css

body {
    background-color: white!important;
}

控制器默认

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


    private function renderJs()
{
    $renderer_source = file_get_contents(__DIR__ . '/../../node_modules/vue-server-renderer/basic.js');
    $app_source = file_get_contents(__DIR__ . '/../../public/build/entry-server.js');
    $v8 = new \V8Js();
    ob_start();
    $v8->executeString('var process = { env: { VUE_ENV: "server", NODE_ENV: "production" }}; this.global = { process: process };');
    $v8->executeString($renderer_source);
    $v8->executeString($app_source);
    return ob_get_clean();
}
}

包.json

    {
    "devDependencies": {
        "@symfony/webpack-encore": "^0.20.1",
        "bootstrap": "^4.3.1",
        "bootstrap-sass": "^3.3.7",
        "jquery": "^3.3.1",
        "node-sass": "^4.9.3",
        "popper.js": "^1.14.7",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-loader": "14.2.2",
        "vue-template-compiler": "^2.5.17",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production"
    },
    "dependencies": {
        "axios": "^0.18.0",
        "moment": "^2.22.2",
        "vue-server-renderer": "^2.6.8"
    }
}

Answer 1

删除这一行

global.jQuery = require('jquery');

因为 Webpack Encore 已经提供了关于这一行的 Jquery：

.autoProvidejQuery()

更多信息，here

编辑

关于你的新错误

V8Js::compileString():2241: 错误：Bootstrap 的 JavaScript 需要 jQuery

确保你已经安装了 Bootstrap

 yarn add bootstrap --dev

由于 Bootstrap 需要 Jquery 和 Popper，所以你也必须安装它

yarn add jquery popper.js --dev

然后再试一次。

如果不起作用，请尝试在您的 JS 文件开头添加库

const $ = require('jquery'); // this "modifies" the jquery module: adding behavior to it // the bootstrap module doesn't export/return anything 
require('bootstrap');

更多信息，Import bootstrap official symfony doc

EDIT 2（关于添加的源代码）

在 app.scss 中，替换这一行

@import '~bootstrap-sass/assets/stylesheets/bootstrap';

通过这个：

@import "~bootstrap/scss/bootstrap";