修改vue的配置项支持生产环境下二级目录访问的方法

1、常规打包

在实际的项目中，我们通常都使用 npm run build 直接打包文件后丢到服务器上访问
打包后的文件目录是这样的：

访问的静态资源都是地址是这样的：

我们现在要放在服务器的二级目录下访问地址，那么访问的路径就应该也加上二级目录，该如何配置尼？

2、方法：找到项目的打包配置文件config下的index.js，对参数assetsPublicPath进行配置：
先看一下默认的配置：

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
  }
  

需要二级目录访问，作如下更改，可与上述代码段对比

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/music/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist/music'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/music/',
  }
  

这样你访问资源时就是二级目录了
http://你的域名/music/

3、这里我用的是宝塔面板配置云服务器的一些东西，还是很方便的。