本文仓库地址 github.com/LuckyChou71…
previve http://124.223.71.181:3001
先贴上 Nginx 的配置
server {
listen 3001;
server_name localhost;
location / {
root /home/ubuntu/react;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
1. vite打包后出现
Failed to load module script:
Expected a JavaScript module script but the server responded with a MIME type of "text/html".
Strict MIME type checking is enforced for module scripts per HTML spec.
解决 vite.config.ts 中的 base 要和 Nginx location 中的一致
如果要区分 开发环境 和 生产环境 的话
可以引入 Vite 的环境变量 在根目录下新建
.env.development 对应开发环境
.env.production 对应生产环境
在里面 写上相同的字段 例如
# .env.production
VITE_APP_BASE_URL=/
# .env.development
VITE_APP_BASE_URL=/
然后在需要使用的地方用 import.meta.env.VITE_APP_BASE_URL就可以取到了
如果项目是 ts 的话 还可以继续编写 ImportMetaEnv 这个类型以获到更好的代码提示
interface ImportMetaEnv {
VITE_APP_BASE_URL: string;
}
转回正题 在这个问题下 我的 vite.config.ts 配置如下
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import qiankun from 'vite-plugin-qiankun';
import path from 'path';
// https://vitejs.dev/config/
export default ({ mode }) => {
const env = loadEnv(mode, process.cwd());
return defineConfig({
plugins: [react(), qiankun('react-demo', { useDevMode: true })],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
// 这里对应 nginx 中的 location
base: env.VITE_APP_BASE_URL,
});
};
2. 配置好 Nginx 后 无法访问网站
查看 nginx 报错信息日志 具体的路径在 nginx.conf 在可查
error_log /var/log/nginx/error.log
大致报错信息如下
Nginx: stat() failed (13: permission denied)
原因是因为当前 Nginx用户 没有对应文件的访问权限
可以输入
sudo ps aux| grep nginx
root 69558 0.0 0.0 66276 1708 ? Ss 10:14 0:00
nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
www-data 69559 0.0 0.1 66516 5540 ? S 10:14 0:00 nginx: worker process
www-data 69560 0.0 0.1 66516 6944 ? S 10:14 0:00 nginx: worker process
root 69794 0.0 0.0 8168 672 pts/1 S+ 10:19 0:00 grep --color=auto nginx
看到 当前 Nginx worker进程的用户是 www-data 也就是 nginx.conf 第一行的配置
解决方法 把 user 改成有访问权限的用户就好了 这边我改成了 root
nginx.conf
user root;
3. Nginx 配置 react-router-dom BrowserRouter
如果react项目中用的是 BrowserRouter 的话
Nginx 要做 try_files 配置 表示找不到对应文件的时候去哪里找
try_files $uri $uri/ <重定向的url>
这边的 url 的 baseurl 对应 location 后面路径
server {
listen 3001;
server_name localhost;
location / {
root /home/ubuntu/react;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
4. Nginx location
Nginx 的location 有一个alias配置
例如如下配置对应的访问关系是
访问 //localhost:3001/react-demo --> /home/ubuntu/react
server {
listen 3001;
server_name localhost;
location /react-demo {
alias /home/ubuntu/react;
index index.html index.htm;
try_files $uri $uri/ /react-demo/index.html;
}
}
再来看一下 root 配置
访问 //localhost:3001/react-demo --> /home/ubuntu/react-demo
server {
listen 3001;
server_name localhost;
location /react-demo {
root /home/ubuntu;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
总结起来就是下面的内容
alias ---> 就是一个真实路径 会替换 location 后面的路径
root ---> root + location
