doc/前端/前端部署问题/nginx+vue部署二级目录.md

nginx部署vue项目路径添加前缀

需要让访问的地址加上dist或者其他前缀

1. 修改nginx.conf文件

   server {
       listen       8081;
       server_name  localhost;
    
       location / {  #不修改此处，确保用户直接输入ip+端口无法访问到系统
           root   html;
           index  index.html index.htm;
       }
       location /dist {#添加前缀,但html中存放vue的目录名尽量也要改成相同名字
          alias  html/dist;
          index  index.html index.htm;
          try_files  $uri  $uri/   /index.html;
       }
   }
   

2. 修改vue.config文件

   dev: {
   
   // Paths
   assetsSubDirectory: 'static',
   assetsPublicPath: '../',
   // 代理列表, 是否开启代理通过[./dev.env.js]配置
   proxyTable: devEnv.OPEN_PROXY === false ? {} : {
     '/kubesphereApi' : {
       target: 'http://10.168.59.60:30881',
       changeOrigin: true,
       pathRewrite: {
         '^/kubesphereApi': ''
       }
     },
   },
   

原因是vue打包后的资源文件默认是绝对路径，只有配置在根目录才有效。修改vue打包配置，找到vue.config.js,修改publicPath:'/' 为 ' ./ ' ，修改为相对路径

1. 重新打包，重启nginx,启动成功