# 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:'/'   为    ' ./  ' ，修改为相对路径

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