Laravel＆＃x2B;惯性VUE 2服务器端渲染 - 样式不起作用

发布于 2025-02-01 13:04:46 字数 3151 浏览 0 评论 0原文

我有一个使用Laravel Vue2开发的应用程序。当我使用NPM Run Prod运行它时，我的应用程序正常。由于我想做SSR，因此我添加了惯性并编辑了下面的代码，但是样式在我的应用程序中无法使用，我无法导入任何内容。

我开始项目的步骤；

npm run prod
npx mix -mix-config = webpack.ssr.mix.js
节点public public public/js/ssr.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <script src="{{ asset('js') }}/manifest.js" type="text/javascript"></script>
    <script src="{{ asset('js') }}/vendor.js" type="text/javascript"></script>
    <script src="{{ asset('js') }}/app.js" type="text/javascript"></script>
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

的

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import MaterialKit from "./plugins/material-kit";
import VueParticles from 'vue-particles'
Vue.use(VueParticles)

Vue.use(MaterialKit);
Vue.use(VueSweetalert2);

Vue.config.productionTip = false;

import('./assets/css/style.css');
const NavbarStore = {
    showNavbar: false
};

Vue.mixin({
    data() {
        return {
            NavbarStore
        };
    }
});

new Vue({
    router,
    render: h => h(App)
}).$mount("#app");

中

import Vue from 'vue'
import { createRenderer } from 'vue-server-renderer'
import { createInertiaApp } from '@inertiajs/inertia-vue'
import createServer from '@inertiajs/server'

createServer((page) => createInertiaApp({
  page,
  render: createRenderer().renderToString,
  resolve: name => require(`./views/${name}`),
  setup({ app, props, plugin }) {
    console.log(page)
    console.log(plugin)
    console.log(props)
    Vue.use(plugin)
    return new Vue({
      render: h => h(app, props),
    })
  },
}))

console

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .disableSuccessNotifications()
    .extract(['vue', 'vue-router', 'axios', 'vue-sweetalert2', 'vue-lazyload', 'vue-carousel', 'vue-material']);

.ssr.mix.js

const path = require('path')
const mix = require('laravel-mix')
const webpackNodeExternals = require('webpack-node-externals')

mix
  .options({ manifest: false })
  .js('resources/js/ssr.js', 'public/js')
  .vue({ version: 2, options: { optimizeSSR: true }, useVueStyleLoader: true},)
  .alias({ '@': path.resolve('resources/js') })
  .webpackConfig({
    target: 'node',
    externals: [webpackNodeExternals()],
  }).extract(['vue', 'vue-router', 'axios', 'vue-sweetalert2', 'vue-lazyload', 'vue-carousel', 'vue-material']);

原文

I have an application that I developed with Laravel vue2. My app works fine when I run it with npm run prod. Since I want to do SSR, I added inertia and edited the codes below, but styles are not working in my application and I cannot import anything.

My steps to start the project;

npm run prod
npx mix --mix-config=webpack.ssr.mix.js
node public/js/ssr.js

Error in browser -
Error in console

app.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <script src="{{ asset('js') }}/manifest.js" type="text/javascript"></script>
    <script src="{{ asset('js') }}/vendor.js" type="text/javascript"></script>
    <script src="{{ asset('js') }}/app.js" type="text/javascript"></script>
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

app.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import MaterialKit from "./plugins/material-kit";
import VueParticles from 'vue-particles'
Vue.use(VueParticles)

Vue.use(MaterialKit);
Vue.use(VueSweetalert2);

Vue.config.productionTip = false;

import('./assets/css/style.css');
const NavbarStore = {
    showNavbar: false
};

Vue.mixin({
    data() {
        return {
            NavbarStore
        };
    }
});

new Vue({
    router,
    render: h => h(App)
}).$mount("#app");

ssr.js

import Vue from 'vue'
import { createRenderer } from 'vue-server-renderer'
import { createInertiaApp } from '@inertiajs/inertia-vue'
import createServer from '@inertiajs/server'

createServer((page) => createInertiaApp({
  page,
  render: createRenderer().renderToString,
  resolve: name => require(`./views/${name}`),
  setup({ app, props, plugin }) {
    console.log(page)
    console.log(plugin)
    console.log(props)
    Vue.use(plugin)
    return new Vue({
      render: h => h(app, props),
    })
  },
}))

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .disableSuccessNotifications()
    .extract(['vue', 'vue-router', 'axios', 'vue-sweetalert2', 'vue-lazyload', 'vue-carousel', 'vue-material']);

webpack.ssr.mix.js

const path = require('path')
const mix = require('laravel-mix')
const webpackNodeExternals = require('webpack-node-externals')

mix
  .options({ manifest: false })
  .js('resources/js/ssr.js', 'public/js')
  .vue({ version: 2, options: { optimizeSSR: true }, useVueStyleLoader: true},)
  .alias({ '@': path.resolve('resources/js') })
  .webpackConfig({
    target: 'node',
    externals: [webpackNodeExternals()],
  }).extract(['vue', 'vue-router', 'axios', 'vue-sweetalert2', 'vue-lazyload', 'vue-carousel', 'vue-material']);

分享到QQ

分享到微博