vue 打包renderBuiltUrl

vue3打包的静态资源需要放到oss上,怎么指定打包的所有静态资源路径为oss路径(不包含图片,只包括打包后的入口js和cs 以及块文件) 搞了个base指定路径只能修改index.html里的入口文件地址。不能改块文件的地址。看了vite的官网代码如下


experimental: {
  renderBuiltUrl(filename: string, { hostId, hostType, type }: { hostId: string, hostType: 'js' | 'css' | 'html', type: 'public' | 'asset' }) {
    if (type === 'public') {
      return 'https://www.domain.com/' + filename
    }
    else if (path.extname(hostId) === '.js') {
      return { runtime: `window.__assetsPath(${JSON.stringify(filename)})` }
    }
    else {
      return 'https://cdn.domain.com/assets/' + filename
    }
  }
}

应该是这个但是改完之后没生效

根据你提供的代码,似乎是在使用 Vite 构建工具,而不是 Vue CLI。如果是 Vue CLI,可以在 vue.config.js 中配置 publicPath 来指定静态资源路径,例如:

module.exports = {
  publicPath: 'https://www.domain.com/'
}

如果是 Vite 的话,可以在 vite.config.js 中使用 renderChunk 和 renderAsset 钩子来修改静态资源路径,例如:

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 将入口文件和块文件分别打包到不同的文件夹中
          'entry.js': ['src/main.js'],
          'chunk.js': ['src/components/*.vue']
        },
        // 修改入口文件和块文件的路径
        chunkFileNames: 'js/[name].js',
        entryFileNames: 'js/[name].js',
        assetFileNames: 'css/[name].[ext]'
      },
      // 修改静态资源的路径
      renderChunk(chunk) {
        if (chunk.type === 'chunk') {
          return chunk.fileName.replace(/^js\//, 'oss/')
        }
      },
      renderAsset(asset) {
        if (asset.type === 'asset' && asset.fileName.endsWith('.css')) {
          return asset.fileName.replace(/^css\//, 'oss/')
        }
      }
    }
  }
}

以上代码将入口文件和块文件分别打包到 js 文件夹和 css 文件夹中,然后将其路径修改为 oss 文件夹中的路径。注意,这里只修改了 js 和 css 文件的路径,如果还有其他类型的静态资源需要修改,可以在 renderAsset 中添加对应的判断逻辑并修改路径。