文章/答案/技术大牛

发布

社区首页 >问答首页 >Laravel +惰性+ Vue 2服务器端渲染-样式不工作

问Laravel +惰性+ Vue 2服务器端渲染-样式不工作
EN

Stack Overflow用户

提问于 2022-05-26 06:15:21

回答 1查看 652关注 0票数 0

我用Laravel vue2开发了一个应用程序。当我用运行它时，我的应用程序工作得很好。因为我想做SSR，我增加了惯性，编辑了下面的代码，但是样式在我的应用程序中不起作用，我不能导入任何东西。

我开始这个项目的步骤；

npm运行程序
npx mix -config=webPack.ssr.Mix.js
节点public/js/ssr.js

浏览器错误 - 控制台错误

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

laravel

vue.js

server-side-rendering

inertiajs

回答 1

Stack Overflow用户

发布于 2022-07-29 09:54:08

尝试添加到.webpackConfig({.，useVueStyleLoader: true})

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72387494

复制

相似问题

问Laravel +惰性+ Vue 2服务器端渲染-样式不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel +惰性+ Vue 2服务器端渲染-样式不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel +惰性+ Vue 2服务器端渲染-样式不工作
EN