nginx 上配置二级目录访问 vue 项目_vue nginx配置二级目录

1. 实现效果

http://ip:port 访问 A 项目(vue 项目)

http://ip:port/c 访问 B 项目(vue 项目)

2. nginx 配置

location / {
  root   /usr/local/nginx/html/A/;
  index  index.html index.htm;
}
 
location /b {
  alias  /usr/local/nginx/html/B/;
  index  index.html index.htm;
}

3. B 项目公共路径修改

按照上面 2 个步骤配置好访问‘ http://ip:port/b ’是无法访问到 B 项目的静态资源的，需要配置 B 项目的公共资源路径：

vue 项目一般在 vue.config.js 中配置：

module.exports = {
  // 区分开发和打包分别配置，打包配置的值和nginx配置的保持一致
  publicPath: process.env.NODE_ENV == 'development' ? '/' : '/b',
}

4. 刷新页面报错 Uncaught SyntaxError: Unexpected token ‘<’

Nginx 配置修改：

location / {
  root /www/wwwroot/topfus_research/research_web/;
  try_files $uri $uri/ /index.html;
}
 
location /admin {
  alias /www/wwwroot/topfus_research/research_ui/;
  try_files $uri $uri/ /index.html;
}