reactjs 将使用vite和basename构建的React应用程序部署到NGinx

g52tjvyc  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(255)

我有一个使用Vite构建的React应用程序,我打算在Nginx上以www.example.com/myapp的价格提供
我已经将React Router中的basename设置为/myapp,并将package.json中的"homepage": "/myapp"设置为package.json,当我运行vite dev服务器时,它工作得很好-站点的范围正确,并在localhost:5173/myapp上提供服务。
但是在运行vite build并复制到我的NGinx服务器后,链接不起作用。以下是基于this answer的位置配置...

location ^~ /myapp {
        // ...
        index index.html;
        alias /home/ubuntu/myrepo/dist;
        try_files $uri $uri/ /myapp/index.html =404;
}

奇怪的是,在日志中,当我的任何配置中都没有引用/usr/share/nginx/html时,它似乎解析到了另一个根/usr/share/nginx/html/myapp/index.html
它不工作,虽然。我只能猜测,因为create-react-app做一些不同的vite build

qni6mghb

qni6mghb1#

有几个问题...
首先,解析到另一个根目录是一个转移注意力的问题--我的NGinx配置没有一个非HTTPS连接的解析器,而我使用http://...连接。为了解决这个问题,我只是用https://...加载了页面。
其次,经过一番挖掘,我发现basevite设置只适用于构建。这意味着配置看起来像这样...

export default defineConfig({
  plugins: [react()],
  base: '/myapp'
})

当我自己构建URL的时候,我还必须更新一些资产引用,我使用import.meta.env.BASE_URL来获取词干。
const srcUrl =${import.meta.env.BASE_URL}/assets/myimg.png`
希望这对其他人有帮助

相关问题