javascript - Vue CLI 和服务器端渲染
问题描述
我正在使用 Vue CLI,它使用 main.js 来挂载应用程序,而不是使用 app.js、entry-client.js 和 entry-server.js的服务器端渲染(根据我在此处遵循的教程)。
我试图绕过 main.js,但我遇到了一个错误,因为它似乎需要一些方法。
如何将 main.js 与 app.js、entry-client.js 和 entry-server.js 保持一致。
这可能是一个非常基本的问题,我可能会在 main.js 中使用 app.js 的内容,因为我想做正确的事情。
主.js:
import Vue from 'vue'
import bootstrap from 'bootstrap'
import App from './App.vue'
import router from './router'
import store from './store'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'
import './registerServiceWorker'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.config.productionTip = false
Vue.use(VueResource)
Vue.use(BootstrapVue)
new Vue({
bootstrap,
router,
store,
render: h => h(App)
}).$mount('#app')
应用程序.js:
import Vue from 'vue'
import App from './App.vue'
import bootstrap from 'bootstrap'
import { createRouter } from './router'
import store from './store'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'
import './registerServiceWorker'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.config.productionTip = false
Vue.use(VueResource)
Vue.use(BootstrapVue)
export function createApp () {
// create router instance
const router = createRouter()
const app = new Vue({
bootstrap,
router,
store,
render: h => h(App)
})
return { app, bootstrap, router, store }
}
服务器客户端.js
import { createApp } from './app'
const { app, router } = createApp()
router.onReady(() => {
app.$mount('#app')
})
入口-server.js
import { createApp } from './app'
export default context => {
// since there could potentially be asynchronous route hooks or components,
// we will be returning a Promise so that the server can wait until
// everything is ready before rendering.
return new Promise((resolve, reject) => {
const { app, router } = createApp()
// set server-side router's location
router.push(context.url)
// wait until router has resolved possible async components and hooks
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
// no matched routes, reject with 404
if (!matchedComponents.length) {
return reject({ code: 404 })
}
// the Promise should resolve to the app instance so it can be rendered
resolve(app)
}, reject)
})
}
任何帮助是极大的赞赏。
解决方案
我刚刚发现如何。默认情况下,Vue CLI 3 没有vue.config.js
. 我必须在文件夹的根目录创建一个来覆盖设置为/src/main.js
.
我使用了vue.config.js
在这个github上找到的并将其entry
写入 ./src/entry-${target}
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const nodeExternals = require('webpack-node-externals')
const merge = require('lodash.merge')
const TARGET_NODE = process.env.WEBPACK_TARGET === 'node'
const createApiFile = TARGET_NODE
? './create-api-server.js'
: './create-api-client.js'
const target = TARGET_NODE
? 'server'
: 'client'
module.exports = {
configureWebpack: () => ({
entry: `./src/entry-${target}`,
target: TARGET_NODE ? 'node' : 'web',
node: TARGET_NODE ? undefined : false,
plugins: [
TARGET_NODE
? new VueSSRServerPlugin()
: new VueSSRClientPlugin()
],
externals: TARGET_NODE ? nodeExternals({
whitelist: /\.css$/
}) : undefined,
output: {
libraryTarget: TARGET_NODE
? 'commonjs2'
: undefined
},
optimization: {
splitChunks: undefined
},
resolve:{
alias: {
'create-api': createApiFile
}
}
}),
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options =>
merge(options, {
optimizeSSR: false
})
)
}
}
推荐阅读
- python - 如何将我的 Python 脚本传递到 Slurm sbatch?
- fortran - 字符声明表
- c# - 在 Azure 认知搜索中处理单复数搜索词
- junit - 使用条件制作自定义类范围的 JUnit 注释
- directx - DirectX11可以将负值写入纹理格式化的浮点数吗?
- azure-devops - 链接到 KeyVault 的 Azure DevOps 变量组的“全选”选项
- excel - 遍历列,如果值为 1,则从上面复制并粘贴
- ios - apns-collapse-id (iOS) 如何与 Firebase 一起使用?
- jquery - jquery 遍历 div 的正确顺序不起作用?
- wordpress - 将 Docker 容器连接到 GitHub - 当使用 docker-compose.yml 创建 docker 映像时