Vue.js生产环境下静态文件路径错误问题求助
解决Vue项目build后静态资源路径带前置斜杠的问题
这个问题其实是Vue项目的公共路径配置导致的,默认情况下框架会把静态资源路径设为绝对路径(带/),我们只需要修改配置切换为相对路径就能解决:
针对Vue2项目
- 在项目根目录找
vue.config.js文件,如果没有就新建一个 - 修改
publicPath配置项为''或者./,示例代码如下:
module.exports = { // 把默认的 '/' 改成空字符串或相对路径 publicPath: '', // 其他项目配置(比如outputDir、lintOnSave等)可以保留 }
针对Vue3 + Vite项目
Vite用base替代了Vue2里的publicPath,配置方式如下:
- 打开项目根目录的
vite.config.js(或vite.config.ts) - 添加/修改
base配置项:
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], // 设置为空字符串或相对路径,去掉静态资源的前置斜杠 base: '' })
修改完成后,重新执行npm run build,生成的dist文件夹里的静态资源路径就会自动去掉前置斜杠,变成你需要的格式啦。
内容的提问来源于stack exchange,提问作者Камилов Тимур
相关产品推荐
相关产品推荐

