vue项目中，npm run build生成的index.html文件只有放在根目录下打开才能生效，怎么解决？

Question

build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  }
  
  assetsPublicPath:'/',应该是设置静态资源的路径吧？跟index.html的位置没有关系吧？
  现在的问题是我把index.js放在服务器根目录下访问时页面是正常的，放在其他位置打开是空白，并且没有报错，怎么解决?
  另外，npm run build后生成的html需要怎么配置才能本地访问？
  

Answer 1

项目配置到服务器上就没问题了、如果你是github pages也不会有问题、放心大胆的放上去吧
他的配置是针对有后台的项目、正常情况下还是不要本地访问玩

Answer 2

assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名

这个改了会导致index.html中静态资源路径的变化，如果你的css资源有嵌套引用或者字体文件，会导致访问异常。

我发布的时候没改，直接把dist下的文件扔到一个目录下就行了

Answer 3

在新的脚手架里面其实已经区分了生产和本地环境的assetsPublicPath

build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/XXX/',  // 项目发布的二级目录
    ...
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...
  }

Answer 4

通过命令 npm run dev可以，但是 npm run build 的看不到效果。你这种情况是因为资源的引用目录为绝对路径，改成相对路径应该就可以了

Answer 5

解决了么？我也遇到同样的问题了