如何解决如何使用 Webpack 构建 server.js?
我有一个 Vue.js 3 前端,当然它分布在许多 .vue
文件中。
我还有一个 server.js
形式的 Node/Express 后端,然后是其他 Javascript 文件到服务器 API 端点和路由等。
我正在尝试使用 Webpack 构建 server.js
,但是当我这样做时,我遇到许多与 .vue
文件未正确加载有关的错误。我不明白为什么在客户端构建时会发生这种情况
负责将 .vue
文件构建到 app.js
文件中。
示例 Webpack 构建错误:
./src/views/information/Index.vue 1:0 模块解析中的错误 Failed: Unexpected token (1:0) 你可能需要一个合适的加载器来 处理这种文件类型,目前没有配置加载器来处理 这个文件。见https://webpack.js.org/concepts#loaders
| | @ ./src/ 同步 ^.*$ ./views/information/Index.vue @ ./src/server.js 55:16-37
这是我用于构建 server.js
的 Webpack 配置:
const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals');
const utils = require('./utils');
module.exports = {
entry: {
server: utils.resolve('/src/server.js')
},output: {
path: utils.resolve('/dist'),filename: 'server.js',},target: 'node',node: {
// Need this when working with express,otherwise the build fails
__dirname: false,// if you don't put this in,__dirname
__filename: false,// and __filename return blank or /
},externals: [nodeExternals()],// in order to ignore all modules in node_modules folder
optimization: {
minimize: false
},module: {
rules: [
{
test: /\.m?js$/,exclude: ['/node_modules/',/\bcore-js\b/,/\bwebpack\/buildin\b/,/@babel\/runtime-corejs3/],include: [utils.resolve('src')],use: {
loader: 'babel-loader',options: {
babelrc : false,// Fixes "TypeError: __webpack_require__(...) is not a function"
// https://github.com/webpack/webpack/issues/9379#issuecomment-509628205
// https://babeljs.io/docs/en/options#sourcetype
sourceType : "unambiguous",presets : [
["@babel/preset-env",{
// Webpack supports ES Modules out of the Box and therefore doesn’t require
// import/export to be transpiled resulting in smaller builds,and better tree
// shaking. See https://webpack.js.org/guides/tree-shaking/#conclusion
modules : false,// Adds specific imports for polyfills when they are used in each file.
// Take advantage of the fact that a bundler will load the polyfill only once.
useBuiltIns : "usage",corejs : {
version : "2",proposals : true
},}]
],}
}
},]
}
};
这里是 server.js
const express = require('express');
const cors = require('cors');
const path = require('path');
const fs = require('fs');
const serialize = require('serialize-javascript');
const { renderToString } = require('@vue/server-renderer');
const ssrManifest = require('../dist/server/ssr-manifest.json');
const server = express();
server.use(express.json());
server.use(express.urlencoded({
extended: false
}));
let distPath = '../dist'
const appPath = path.join(__dirname,distPath,'server',ssrManifest["app.js"]);
const createApp = require(''+appPath).default;
const renderState = (store,windowKey) => {
const state = serialize(store);
const autoRemove =
';(function(){var s;(s=document.currentScript||document.scripts[document.scripts.length-1]).parentNode.removeChild(s);}());';
const nonceAttr = store.nonce ? ' nonce="' + store.nonce + '"' : ''
return store
? '<script' +
nonceAttr +
'>window.' +
windowKey +
'=' +
state +
autoRemove +
'</script>'
: '';
};
server.use('/api/int/v1',cors(),require('./router/api/int/v1'));
server.get('**',async function(req,res) {
console.log(req.params[0]);
let html;
try {
const { app,vuexStore,nativeStore,router } = await createApp();
router.push(req.url);
await router.isReady();
let appContent = await renderToString(app);
fs.readFile(path.resolve(__dirname,'client','index.html'),'utf-8',(err,html) => {
if (err) {
throw err
}
appContent = `<div id="app">${renderState(vuexStore.state,'__INITIAL_STATE__')}${renderState(nativeStore,'__INITIAL_NATIVE_STATE__')}${appContent}</div>`
})
html = html.toString().replace('<div id="app"></div>',`${appContent}`)
res.setHeader('Content-Type','text/html');
console.log(html)
res.send(html);
} catch (error) {
if (error.code === 404) {
return res.status(404).send('404 | Page Not Found');
}
return res.status(500).send(error);
return res.status(500).send('500 | Internal Server Error');
}
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。