配置也是默认的配置 build: { rollupOptions: { input: { index: resolve(__dirname, 'index.html') }, output: { manualChunks: { 'echarts': ['echarts'] } } } }, 期望的文件打包后的目录为这样 最终的配置改为 build: { rollupOptions: { input: { index: resolve(__dirname, 'index.html'...
server: 开发服务器配置。 port: 设置开发服务器端口。 open: 启动开发服务器时自动打开浏览器。 resolve: 模块解析配置。 alias: 路径别名配置,例如将@映射到/src目录。 build: 构建配置。 outDir: 指定输出目录。 assetsDir: 指定静态资源目录。 实际项目中的高级配置和常用插件 1. 热重载与快速刷新 Vite内置...
optimizeDeps 配置优化依赖项的选项，使用了 esbuild。css 配置 CSS 预处理器和 PostCSS 插件。使用了 SCSS 和 Less 预处理器以及 Autoprefixer 插件。build 指定输出目录和构建选项。其中包括输出目录、代码压缩、Rollup 配置等。resolve 配置模块别名，用于在代码中使用简洁的模块路径。assetsInclude 配置需要包含的静态...
build: { target: ['modules'],//设置最终构建的浏览器兼容目标polyfillModulePreload:true,//是否自动注入 module preload 的 polyfilloutDir: 'dist',//指定输出路径assetsDir: 'assets',//指定生成静态文件目录assetsInlineLimit: '4096',//小于此阈值的导入或引用资源将内联为 base64 编码cssCodeSplit:true,/...
build:配置生产构建选项。 // vite.config.js export default { resolve: { alias: { '@': '/src', }, }, css: { preprocessorOptions: { scss: { additionalData: '@import "@/styles/variables.scss";', }, }, }, build: { outDir: 'dist', ...
问题:新项目生产环境发布后,一直少一层路径,如下图 因为不太熟悉vite.config,ts的配置,各种查询后,发现网上都是说加一个root:'./'根目录,各种试错,最终发现问题不是root 答案:是加base:"./",成功了如下图 记录一下,避坑,希望帮助有
HelloWorld.vue │ └── main.js 入口 └── vite.config.js vite工程化配置文件 接着两...
效果: 构建后的所有静态资源路径都是相对路径。例如,./assets/main.js。 场景: 当你的应用程序可能部署在子目录(如https://example.com/subdir/)或者需要在本地文件系统中查看(如直接打开index.html文件)时使用。 示例 base: '/' 配置: exportdefaultdefineConfig({base:'/',plugins:[vue()],build:{outDir...
构建配置 (build): outDir: 'dist':设置构建输出目录为dist。 rollupOptions:自定义 Rollup 构建选项,如输入文件。 开发服务器配置 (server): port: 3000:设置开发服务器端口为 3000。 proxy:配置代理,将 API 请求代理到后端服务器。 路径别名 (resolve.alias): ...
//vite.config.jsimport{defineConfig}from'vite'exportdefaultdefineConfig({base:'/foo/'// 开发或生产环境服务的公共基础路径 }) 1. 2. 3. 4. 5. 6. build.outdir 指定打包文件的输出目录。默认值为dist,当dist被占用或公司有统一命名规范时,可进行调整。