Vue.js构建后资源找不到：为何需加dist路径及配置方案

为什么"/assets/xxx"路径无效？ #

• 以/开头的是服务器根路径，它指向的是服务器的根目录，而非你的dist目录。如果启动服务器时，dist并非直接作为服务器的根目录（比如dist被放在服务器根目录的子文件夹里，或者启动服务器的工作目录不是dist），那么/assets/script.js会被解析到服务器根目录下的assets文件夹，而你的实际资源在dist/assets里，自然找不到。
• 改成dist/assets/xxx时，这是相对路径，它以当前index.html的位置为基准，能正确定位到同目录下的assets文件夹，所以可以正常访问。

如何配置Vue项目自动生成正确路径？ #

Vue CLI 项目（Vue 2/3通用） #

在项目根目录新建或修改vue.config.js，添加publicPath配置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

• 生产环境设置为./，打包后资源会以相对路径引用，适配dist在服务器的任意存放位置；开发环境保留/，保证开发服务器的热更新功能正常运行。

Vite 项目（Vue 3） #

修改项目根目录的vite.config.js，添加base配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './'
})

• base: './'会让打包后的资源引用自动采用相对路径，无需手动修改index.html里的路径，就能适配dist的存放位置。

内容的提问来源于stack exchange，提问作者Rostik Romanets