【发布时间】：2022-01-08 00:04:08
【问题描述】：
我正在尝试使用 nuxt 3 创建一个网络应用程序，它在我的桌面上使用 node js 版本 17.3.0 工作得非常好，但在服务器上却不是这样......
这是一个带有 cpanel 的服务器，我使用工具“设置 node.js 应用程序”，但我每次都收到此错误。
App 37252 output: node:internal/modules/cjs/loader:979
App 37252 output: throw new ERR_REQUIRE_ESM(filename, true);
App 37252 output: ^
App 37252 output: Error [ERR_REQUIRE_ESM]: require() of ES Module /home/private/admin/server/index.mjs not supported.
App 37252 output: Instead change the require of /home/private/admin/server/index.mjs to a dynamic import() which is available in all CommonJS modules.
App 37252 output: at Module.require (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:80:25)
App 37252 output: at loadApplication (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:243:2)
App 37252 output: at setupEnvironment (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:214:2)
App 37252 output: at Object.<anonymous> (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:133:1) {
App 37252 output: code: 'ERR_REQUIRE_ESM'
App 37252 output: }
在“设置 node.js 应用程序”工具中，可用的最新节点版本是 16.13.0，所以我认为问题出在此（在我的 17.3.0 版本的计算机上运行良好）。
如果是这样，我怎样才能将最新版本的 nodeJs 放到 cpanel 中？
编辑：
我的 package.json ：
我的 nuxt.config.ts ：
我的 app.vue
<template>
<Html lang="fr">
<Head>
<Title>title</Title>
<Meta name="description" content="My page's description" />
</Head>
<Body>
<header>
<nav>
<ul>
<li class="nav-item active">
<a href="#">
<span class="icon">
<ion-icon name="grid-outline"></ion-icon>
</span>
<span class="text">Hub</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<span class="icon">
<ion-icon name="checkmark-outline"></ion-icon>
</span>
<span class="text">Vérification</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<span class="icon">
<ion-icon name="build-outline"></ion-icon>
</span>
<span class="text">Modération</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<span class="icon">
<ion-icon name="chatbubble-ellipses-outline"></ion-icon>
</span>
<span class="text">Communication</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<span class="icon">
<ion-icon name="settings-outline"></ion-icon>
</span>
<span class="text">Paramètre</span>
</a>
</li>
<div class="indicator"></div>
</ul>
</nav>
</header>
<NuxtPage />
</Body>
</Html>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(navItem =>
navItem.addEventListener('click', () => {
navItems.forEach(item => {
item.classList.remove('active');
});
navItem.classList.add('active');
})
);
});
</script>
<style lang="scss">
@font-face {
font-family: 'Roboto';
src: local('Roboto'), url('./assets/fonts/Roboto-Black.ttf');
}
body {
font-family: 'Roboto';
margin: 0;
}
nav {
position: fixed;
bottom: 0px;
width: calc(100% - 10rem);
height: 5rem;
padding: 0 5rem;
background: #039ce7;
border-radius: 10px 10px 0 0;
}
nav > ul {
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
list-style: none;
}
nav > ul > li > a {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav > ul > li > a > .icon {
line-height: 5rem;
font-size: 2rem;
color: white;
transition: 0.5s;
}
nav > ul > li:hover > a > .icon {
transform: translateY(-.5rem);
}
nav > ul > li.active > a > .icon {
transform: translateY(-2.4rem);
color: white;
}
nav > ul > li > a > .text {
position: absolute;
font-size: 1rem;
opacity: 0;
color: white;
transition: 0.5s;
transform: translateY(40px);
}
nav > ul > li:hover > a > .text {
opacity: 1;
transform: translateY(22px);
}
nav > ul > li.active > a > .text {
opacity: 1;
transform: translateY(22px);
}
nav .indicator {
position: absolute;
top: calc(-52% + -8px);
width: 5rem;
height: 5rem;
transform: translateX(50%);
border-radius: 50%;
background: #039ce7;
border: 8px solid white;
transition: .5s;
}
nav .indicator::before {
content: '';
position: absolute;
top: 52%;
left: -20px;
width: 15px;
height: 15px;
border-top-right-radius: 24px;
box-shadow: 0 -5px 0 0 white;
}
nav .indicator::after {
content: '';
position: absolute;
top: 52%;
right: -20px;
width: 15px;
height: 15px;
border-top-left-radius: 24px;
box-shadow: 0 -5px 0 0 white;
}
nav ul li:nth-child(1).active ~ .indicator {
left: 0;
}
nav ul li:nth-child(2).active ~ .indicator {
transform: translateX(0);
left: 25%;
}
nav ul li:nth-child(3).active ~ .indicator {
transform: translateX(-50%);
left: 50%;
}
nav ul li:nth-child(4).active ~ .indicator {
transform: translateX(-100%);
left: 75%;
}
nav ul li:nth-child(5).active ~ .indicator {
transform: translateX(-150%);
left: 100%;
}
</style>
我的 index.vue ：
<template>
<div>
<h1>{{ data }}</h1>
</div>
</template>
<script setup>
// eslint-disable-next-line no-undef
const { data } = await useFetch('/api/hello');
</script>
我的 hello.ts 文件：
export default async () => 'Hello World';
我的项目刚刚开始，所以我只有 App.vue、Index.vue 和 hello.ts
为了部署我的应用程序，我运行npm run deploy，然后我将“.output”文件夹（构建应用程序的文件夹）的所有内容移动到我服务器上的管理文件夹中（使用 filezilla）。
.输出文件夹：
（任何需要都在 index.mjs 文件中）
在我的服务器上，我使用“setup node.js app”工具启动应用程序。
【问题讨论】：