vue3 打包后打开项目报错？

Question

默认打包后是这样的

如何修改打包后文件存放路径，变成这样

---

8.18补充

这样配置之后打包的目录是我要的，但是打开后，报了一个错误，但是目前页面看起来没有任何问题，想问一下这个问题是什么原因造成的（路径不正确我知道，是想问为什么会出现2个static），怎么处理,麻烦各位大佬解答
问题截图如下：

Answer 1

这个和你的打包工具有关，你用的是webpack还是vite(rollup)呢，假如你用的webpack5，vue.config.js可以参考下面

const rootPath = 'static'
...
configureWebpack: config => {
    if (NODE_ENV === 'production') {
      config.output.filename = `${RootPath}/js/[name].[contenthash:8].js`
      config.output.chunkFilename =`${RootPath}/js/[name].[contenthash:8].js`
    }
  },
chainWebpack: config => {
if (NODE_ENV === 'production') {
  config.module
    .rule('images')
    .set('generator', {
      filename: `${RootPath}/img/[name].[hash:8].[ext]`
    })
  config.module
    .rule('media')
    .set('generator', {
      filename: `${RootPath}/media/[name].[hash:8].[ext]`
    })
  config.module
    .rule('fonts')
    .set('generator', {
      filename: `${RootPath}/fonts/[name].[hash:8].[ext]`
    })
  config.module
    .rule('svg')
    .set('generator', {
      filename: `${RootPath}/fonts/[name].[hash:8].[ext]`
    })
}