要在Vite 配置中设置相对路径,你需要修改 vite.config.ts 或vite.config.js 文件中的相关配置。主要需要关注 base 配置项以及 build.assetsDir 和build.rollupOptions.output 中的资源文件名配置。 设置base 配置项: base 配置项用于指定开发服务器和构建后的静态资源的公共基础路径。将其设置为 './' 或一个相对...
base: './' 配置: exportdefaultdefineConfig({base:'./',plugins:[vue()],build:{outDir:'dist',rollupOptions:{input:{main:resolve(__dirname,'index.html')}}}); 构建后的 HTML 可能包含: 选择合适的base 如果你的应用程序将部署在服务器的根路径,并且你希望所有静态资源路径都是绝对路径,那么使用...
1.在vite中默认打包的文件放到assets文件夹中 2.开发环境下我们的图片位置在/src,ok,本地没问题正常显示,你打了个包 (npm run build),然后又运行了npm脚本preview, 也没问题,但是在一些服务器上,使用绝对目录会导致404,所以我们需要配置为相对目录 3.这时需要将打包路径改为相对路径,vite打包默认为绝对路径 4....
<!--前端框架调试版本--> <!--组件市场工具-->
但问题是,编译的文件具有相同的相对路径,而我需要 module/%moduleName%/%relative path% 所以我需要 src="module/ 而不是 src="/assets/index-c371877d.js"测试/资产/index-c371877d.js”我尝试更改 vite assetDir:export default defineConfig({ plugins: [vue(), vueJsx()], resolve: { alias: { '...
resolve: {//配置根路径别名: import('@/pages/login/login.vue')alias: {"@": path.resolve(__dirname,"src"),//注意一定不要随意命名,a b c这样的,项目的目录也不能为关键字保留字!!"comp": resolve(__dirname,"src/components"),//配置图片要这样引用"/img":"./src/assets", ...
build:{ target:['modules'],// 设置最终构建的浏览器兼容目标 polyfillModulePreload:true,// 是否自动注入 module preload 的 polyfill outDir:'dist',// 指定输出路径 assetsDir:'assets',// 指定生成静态文件目录 assetsInlineLimit:'4096',// 小于此阈值的导入或引用资源将内联为 base64 编码 ...
"comp":resolve(__dirname,"src/assets/images/"),//组件存放位置文件夹 "/images":"./src/assets/images"//静态资源路径使用相对地址,地址'./xxx/xxx',否则开发模式会报错 1. 2. build打包 terserOptions生产环境移除console.log build: { minify: 'terser',//必须配置为terser,否则terserOptions不起作用 ...
build: { outDir: 'dist', assetsDir: 'static' } }); 常见配置项详解 base:构建时的公共基础路径。默认是/,可以设置为相对路径或绝对路径。 server.port:启动服务器时使用的端口,默认是 3000。 server.open:启动服务器时是否自动打开浏览器,默认是 false。
在前端开发中,background-image属性非常常见,有很多时候需要使用内联样式来绑定此属性,但是在vue项目中,如果如下面代码填写路径会找不到图片 项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../../这种形式。在项目打包build设置路径assetsPublicPath:'./',然后哪些没有转成base64的背...