技术交流 > Vue.js > vue中打包之后的dist文件不放在服务器的根目录下

vue中打包之后的dist文件不放在服务器的根目录下

在工作当中,我使用webpack打包的dist,由于管理的问题,无法被放在服务器根目录下 ,但在目前的vue配置,dist不放在根目录下,访问页面会成为一片空白,于是便要对vue框架的config进行配置修改。


首先对vue中config文件夹的index.js做配置,将build.assetsPublicPath由绝对路径改为相对路径

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

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',   //原本默认为 / 改为 ./相对路径

  }


这样就可以放在其他目录下访问了!

然后还会出现一个问题,dist打包的图片在服务器上可能出现无法访问的情况,这种情况多数是因为图片路径不对,所以我们还需要对vue的build文件下的utils.js做修改,将generateLoaders方法中判断options.extract的return中添加 publicPath:'../../',请注意publicPath的../,与你后端所放dist的层级有关。


function generateLoaders (loader, loaderOptions) {
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'    //这个../与dist所在层级有关
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

2022-03-16 21:09:22
评论
  • 评论加载中...

评论内容: