解决打包问题--出现404问题

原因：

1.默认打包，index.html引入其他打包的文件使用的是绝对地址，

地址是以/开头（要找到当前index.html打开时所在服务器的根地址（文件夹））。

就得确保你的vscode+liserver插件打开时，vscode根目录的直接是dist文件夹。

你如果把dist文件夹交给后台运维工程师部署到服务器上，dist下内容就得在服务器根目录才行，

但是服务器一般会有多个项目，不让你同根目录直接放1个项目。

---

解决：webpack让你写一个配置想publicPath（控制index.html引入其他资源的前缀地址）

vue.config.is(脚手架配置文件，webpack配置文件)

publicPath：默认值'/'确保开发环境下，是这个值，因为开发服务器会把所有打包在内存里面而且作为服务器的根目录文件夹，既结对地址

生产环境准备上线了，这个时候，就得用相对地址，publicPath：'./'

路劲不以/开头，就是以./开头（默认）

module.exports = defineConfig({
  // 影响打包时，index.html引入其他资源的前缀地址
  // ./可以让开发环境和生产环境都可以正常使用
  // 为了严谨一些
  // 开发环境：'/'
  // 运行环境：'./'
  // 问题：有无代码可以让他自己识别当前运行环境？
  // 解决：node里有个内置的环境变量process.env.NODE_ENV
  // process.env.NOOE_ENV他会根据你敲击的命令，来使用不同的值
  // 如果你敲击的是npm run serve，process.env.NODE_ENV的值就是‘developmengt’字符串
  // 如果你敲击的是npm run build，process.env.NODE_ENV的值就是‘production’字符串
  // ------------------
  // 方法一：不严谨
  // publicPath: './'
  // -----------------
  // 方法二：
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

总结：

// 1.publicPath:影响的是打包（webpack开发服务器/dist）的时候index.html引入其他资源的前缀地址

// 情况1：开发环境，值：'/'绝对路径

// 情况2：生产环境，值：'./'(才能确保dist/index.html相对路径下访问)