nginx Vite+React+TS项目加载资产但body页面为空

7cwmlq89 于 2023-05-22 发布在 Nginx

关注(0)|答案(1)|浏览(239)

我创建了一个Vite+React+TS项目。我正在通过NGINX服务器在AWS Ubuntu中部署。index.html和资源已发送，但页面为空白。您可以通过“www.example.com”访问它http://www.servername.com/lionmiss-hub（出于隐私原因，我不想透露真实的的域名）
大家好！
我创建了一个Vite + React + TS项目。我正在通过NGINX服务器在AWS Ubuntu中部署。index.html和资源已发送，但页面为空白。你可以通过“www.example.com”访问它www.servername.com/lionmiss-hub（出于隐私原因，我不想透露真实的的域名）。
我想可能是基本URL问题。但是，资产和资源加载正确。当我检查html代码时，主体是空的。另一方面，我在根域（www.servername.com）中有一个Vite + Vue，并且加载得很好。
/etc/nginx/sites-available/default

server {

  # Ports
  listen [::]:443 ssl ipv6only=on;
  listen 443 ssl;

  # Config Cert
  ssl_certificate /etc/letsencrypt/live/servername.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/servername.com/privkey.pem;
  include /etc/letsencrypt/options-ssl-nginx.conf;
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

  access_log /projects/logs/access.log;

  root /projects;

  # Index file
  index index.html index.htm;

  # Server Name
  server_name servername.com www.servername.com;

  ###################
  ## Personal Page ##
  ###################

  location / {
    root /projects/personal-page/dist;
  }

  ##############
  ## LionMiss ##
  ##############

  location /lionmiss-hub {
    alias /projects/lionmiss/hub/dist;
  }

}

server {

  # Ports
  listen 80 default_server;
  listen [::]:80 default_server;

  # Server Name
  server_name servername.com www.servername.com;

  ## Redirect http:// tp https://
  if ($host = www.servername.com) {
    return 301 https://$host$request_uri;
  }

  if ($host = servername.com) {
    return 301 https://$host$request_uri;
  }

  ## Return Not Found
  return 404;
}

/projects/lionmiss/hub/.env

VITE_BASE_URL="lionmiss-hub/"

/projects/lionmiss/hub/vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react-swc'
import eslint from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig( ({command, mode}) => {

  const env = loadEnv(mode, process.cwd(), '');

  return{
    plugins: [react()],
    base: env.VITE_BASE_URL
  }
})

这些是浏览器控制台的屏幕截图。您可以看到主体没有加载div或任何标记。

再见，感谢您的帮助或建议！

nginx

来源：https://stackoverflow.com/questions/76295958/vitereactts-project-load-assets-but-the-body-page-is-empty

1条答案

按热度按时间

siotufzp1#

太棒了！！😎🔫
啊，啊，我要回答我自己😄最后，我决定在本地测试改变“基地”的价值。然后我意识到控制台对react-router的警告。它显示了关于URL中缺少“基”值的消息，所以让我们改变它
这是原始代码

const App: React.FC = () => {
  const theme: ThemeLMH = useSelector((state: AppState) => state.user.theme);

  return (
    <ThemeProvider theme={themeStyle[theme]}>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Auth />} />
          <Route path="/" element={<Main />}>
            <Route index element={<Home />}></Route>
            <Route path="/contact" element={<Contact />}></Route>
            <Route path="*" element={<Error />}></Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
};

export default App;

现在，我们仅在第一级管线中应用更改。

function createPath(path: string): string {
  const { VITE_BASE_URL } = import.meta.env;
  return `${VITE_BASE_URL as string}${path}`;
}

const App: React.FC = () => {
  const theme: ThemeLMH = useSelector((state: AppState) => state.user.theme);

  return (
    <ThemeProvider theme={themeStyle[theme]}>
      <BrowserRouter>
        <Routes>
          <Route path={createPath('login')} element={<Auth />} />
          <Route path={createPath('')} element={<Main />}>
            <Route index element={<Home />}></Route>
            <Route path='contact' element={<Contact />}></Route>
            <Route path="*" element={<Error />}></Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
};

export default App;

我差点忘了，整个项目的链接也必须改变。在这种情况下，“/”可能是一个小笑话。VITE_BASE_URL的值是“lionmiss-hub/”，斜杠在末尾🃏。工作URL必须在开头加上一个斜杠。让我们重用前面的“createPath”并添加“/"。

<Link to={`/${createPath('test')}`}>{test}</Link>
// /lionmiss-hub/test

希望你喜欢。这是一个非常愚蠢的错误，可能会持续你很多个小时。
周末愉快！🥳

赞(0）回复(0）举报 2023-05-22

我来回答

nginx Vite+React+TS项目加载资产但body页面为空

1条答案

相关问题

热门标签

最新问答