1

我已经为 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();

应用程序.js (应用程序.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);
    });

应用程序.scss

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

应用程序.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"
    }
}
4

1 回答 1

1

删除此行

global.jQuery = require('jquery');

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

.autoProvidejQuery()

更多信息，在这里

编辑

关于你的新错误

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');

更多信息，导入 bootstrap 官方 symfony 文档

编辑 2（关于添加的源代码）

在 app.scss 中，替换这一行

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

通过这个：

@import "~bootstrap/scss/bootstrap";
于 2019-03-05T10:59:04.097 回答