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

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需要怎么配置才能本地访问?
  
阅读 22.2k
评论
    5 个回答
    • 2.6k

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

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

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

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

        • 676

        在新的脚手架里面其实已经区分了生产和本地环境的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: '/',
            ...
          }

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

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

            该答案已被忽略,原因:

              撰写回答

              登录后参与交流、获取后续更新提醒