配置也是默认的配置 build: { rollupOptions: { input: { index: resolve(__dirname, 'index.html') }, output: { manualChunks: { 'echarts': ['echarts'] } } } }, 期望的文件打包后的目录为这样 最终的配置改为 build: { rollupOptions: { input: { index: resolve(__dirname, 'index.html'...
css 配置 CSS 预处理器和 PostCSS 插件。使用了 SCSS 和 Less 预处理器以及 Autoprefixer 插件。build 指定输出目录和构建选项。其中包括输出目录、代码压缩、Rollup 配置等。resolve 配置模块别名，用于在代码中使用简洁的模块路径。assetsInclude 配置需要包含的静态资源。server 配置开发服务器的选项，包括端口号、跨域...
build: { target: ['modules'],//设置最终构建的浏览器兼容目标polyfillModulePreload:true,//是否自动注入 module preload 的 polyfilloutDir: 'dist',//指定输出路径assetsDir: 'assets',//指定生成静态文件目录assetsInlineLimit: '4096',//小于此阈值的导入或引用资源将内联为 base64 编码cssCodeSplit:true,/...
默认情况下 vite 打包后 dist 文件夹下只有 index.html vite.svg assets这三个,所有打包后的js图片css全都放在 assets 文件夹下面,和这些东西原本的路径没关系至于第二个问题,URL 是js 的 api,文档在这里,这是在 js 中执行的代码,new URL(`../assets/${name}`,import.meta.url).href 返回的是图片的...
但是这种写法,build 编译后找不到路径。解决方案 后面换成这种写法。 dev 、build 都可以使用。 // 路由 const modules = import.meta.glob('../../views/*/*.vue'); const _modules = (file) => modules['../../views' + file + '.vue']; let routeDic = { '/permissions': { icon: 'per...
开发环境下我们的图片位置在/src,ok,本地没问题正常显示,你打了个包 (npm run build),然后又运行了npm脚本preview, 也没问题,但是在一些服务器上,使用绝对目录会导致404,所以我们需要配置为相对目录 二:路径别名 先引入path,在配置, 注意一定不要随意命名,a b c这样的,项目的目录也不能为关键字保留字!!
build:配置生产构建选项。 // vite.config.js export default { resolve: { alias: { '@': '/src', }, }, css: { preprocessorOptions: { scss: { additionalData: '@import "@/styles/variables.scss";', }, }, }, build: { outDir: 'dist', ...
vite.config.ts关于build后少一层目录的问题 问题:新项目生产环境发布后,一直少一层路径,如下图 因为不太熟悉vite.config,ts的配置,各种查询后,发现网上都是说加一个root:'./'根目录,各种试错,最终发现问题不是root 答案:是加base:"./",成功了如下图...
构建配置 (build): outDir: 'dist':设置构建输出目录为dist。 rollupOptions:自定义 Rollup 构建选项,如输入文件。 开发服务器配置 (server): port: 3000:设置开发服务器端口为 3000。 proxy:配置代理,将 API 请求代理到后端服务器。 路径别名 (resolve.alias): ...
// 路径解析配置 resolve: config.resolve, // 自定义资源类型 assetsInclude: config.assetsInclude, // 插件 plugins: config.plugins.map((p) => p.name), // 预构建配置 optimizeDeps: { include: config.optimizeDeps?.include, exclude: config.optimizeDeps?.exclude, ...