Question

我有带有Vue，Vue路由器，Vuex和Vuetify的SPA项目。我尝试将其修复为使用@akryum/vue-cli-plugin-ssr的服务器端渲染。但是我得到一个错误。

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:264:10)
    at Object.runInThisContext (vm.js:316:10)
    at Module._compile (internal/modules/cjs/loader.js:670:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at r (/home/ns16/projects/my/vuejs/vue-articles-app_ssr-plugin/node_modules/vue-server-renderer/build.dev.js:9300:16)
    at Object.vuetify/lib (webpack:/external "vuetify/lib":1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module../src/plugins/vuetify.js (src/plugins/vuetify.js:1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module../src/main.js (app.js:777:74)
error during render url : /
/home/ns16/projects/my/vuejs/vue-articles-app_ssr-plugin/node_modules/vuetify/lib/index.js:1
(function (exports, require, module, __filename, __dirname) { import Vuetify from './components/Vuetify';
                                                                     ^^^^^^^

这是我的代码

src / main.js

import Vue from 'vue'

import './plugins/vuetify'
import App from './App.vue'
import { createRouter } from './router'
import { createStore } from './store'

Vue.config.productionTip = false

export async function createApp({ beforeApp = () => {}, afterApp = () => {} } = {}) {
    const router = createRouter()
    const store = createStore()

    await beforeApp({ router, store })

    const app = new Vue({ router, store, render: h => h(App) })
    const result = { app, router, store }

    await afterApp(result)

    return result
}

src / plugins / vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
    iconfont: 'md',
})

我在做什么错了？

Answer 1

我创建了一个vue.config.js文件，其内容如下：

module.exports = {
    pluginOptions: {
        ssr: {
            nodeExternalsWhitelist: [/^vuetify/]
        }
    }
}

对我有帮助。

Vue SSR + Vuetify，“意外的标识符”错误

1 个答案: