NodeJS 使用React + Vite部署Azure应用服务

goucqfw6  于 2023-08-04  发布在  Node.js
关注(0)|答案(1)|浏览(123)

我正在部署一个使用React + Vite + Typescript制作的前端应用程序。当工件加载到App Service时,我得到以下错误:

A P P   S E R V I C E   O N   L I N U X
Documentation: http://aka.ms/webapp-linux
NodeJS quickstart: https://aka.ms/node-qs
NodeJS Version : v18.16.0
Note: Any data outside '/home' is not persisted
Starting OpenBSD Secure Shell server: sshd.
Starting periodic command scheduler: cron.
Cound not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
Could not find operation ID in manifest. Generating an operation id...
Build Operation ID: 42ccecfd-8536-418a-9db2-5d5949254eb9
Environment Variables for Application Insight's IPA Codeless Configuration exists..
Writing output script to '/opt/startup/startup.sh'
Running #!/bin/sh
# Enter the source directory to make sure the script runs where the user expects
cd "/home/site/wwwroot"
export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
if [ -z "$PORT" ]; then
        export PORT=8080
fi
PATH="$PATH:/home/site/wwwroot" npm run dev
npm info using npm@9.6.4
npm info using node@v18.16.0
> bur-portal-frontend@0.0.0 dev
> vite
npm http fetch GET 200 https://registry.npmjs.org/npm 1456ms (cache updated)
(node:76) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/site/wwwroot/node_modules/.bin/vite:2
import { performance } from 'node:perf_hooks'
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47
Node.js v18.16.0
npm notice
npm notice New minor version of npm available! 9.6.4 -> 9.8.1
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.8.1>
npm notice Run `npm install -g npm@9.8.1` to update!
npm notice

字符串
正如你所看到的,这个错误来自Vite库,我似乎不知道如何解决这个问题。下面是我正在使用的库,+ Node 18.12.1:

├── @types/react-dom@18.2.6
├── @types/react@18.2.14
├── @typescript-eslint/eslint-plugin@5.61.0
├── @typescript-eslint/parser@5.61.0
├── @vitejs/plugin-react@4.0.2
├── axios@1.4.0
├── eslint-plugin-react-hooks@4.6.0
├── eslint-plugin-react-refresh@0.4.1
├── eslint@8.44.0
├── powerbi-client@2.22.3
├── react-dom@18.2.0
├── react-hook-form@7.45.1
├── react-hot-toast@2.4.1
├── react-router-dom@6.14.1
├── react@18.2.0
└── typescript@5.1.6

uyhoqukh

uyhoqukh1#

  • 已使用此链接创建和部署React + Vite
  • 部署将仅在site/wwroot下进行。转到文件夹并安装npm install


的数据

import  {  defineConfig  }  from  'vite'

import  react  from  '@vitejs/plugin-react'

export  default  defineConfig({
plugins: [react()],

})

字符串

  • 通过以下步骤在image中创建了一个React + Vite。
  • 运行dev将termial。在local部署使用此参考Azure应用服务与Visual Studio Code到Azure。
  • 有关更多详细信息,请参阅将React应用程序部署到Azure Web和SO的过程

相关问题