Vue 3 + Typescript + Vite + vant3 搭建移动端通用架子

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

// https://vitejs.dev/config/
// export default defineConfig({
//   plugins: [vue()]
// })

import { defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
const path= require('path');
import styleImport from 'vite-plugin-style-import';
import viteCompression from 'vite-plugin-compression';
//https://vitejs.dev/config/
export default ({ mode }) => {
  return defineConfig({
          plugins: [
            vue(),
            styleImport({
              libs: [{
               libraryName: 'ant-design-vue',
               esModule: true,
               resolveStyle: (name) => {
                return `ant-design-vue/es/${name}/style/css`;
               },
              }]
             }),
             viteCompression({//压缩代码,在传输的时候用 gzip 压缩,提高资源访问速度
              verbose: true,
              disable: false,
              threshold: 10240,
              algorithm: 'gzip',
              ext: '.gz'
              })
          ],
           // 引入第三方的配置
          optimizeDeps: {
            include: ["moment", "ant-design-vue", "axios","vue-i18n","nprogress","mockjs"]
          },
          base:loadEnv(mode, process.cwd()).VITE_APP_LOCAL, //https://foo.com/ 打包后文件(存放网站的目录)的地址-显示的浏览器地址/dev/
          build:{
            brotliSize:false,//启用/禁用 brotli 压缩大小报告。压缩大型输出文件可能会很慢,因此禁用该功能可能会提高大型项目的构建性能。
            chunkSizeWarningLimit:500,//大小警告的限制(以 kbs 为单位)
            outDir:"dist-"+loadEnv(mode, process.cwd()).VITE_APP_NAME, //打包名称
            terserOptions:{
              compress: { //处理打包去掉console.log
                drop_console: true,
                drop_debugger: true
              }
            }
            // rollupOptions: {
            //   output: {
            //     manualChunks: {
            //       'ant-design-vue': ['ant-design-vue'],
            //       'vue-i18n': ['vue-i18n'],
            //       'nprogress': ['nprogress'],
            //     }
            //   }
            //  }
          },
         server: {
            port: 8080,     // 端口号
            open:false,// 是否自动在浏览器打开
            https:false,
            proxy: { //接口代理
              // string shorthand
              '/foo': 'http://localhost:4567/foo',
              // with options
              '/api': {
                target: 'http://jsonplaceholder.typicode.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
              },
              // with RegEx
              '^/fallback/.*': {
                target: 'http://jsonplaceholder.typicode.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/fallback/, '')
              }
            }
         },
         resolve: {
          alias: { //路径地址
              '@': path.resolve(__dirname, './src'),
              '@assets': path.resolve(__dirname, './src/assets'),
              '@components': path.resolve(__dirname, './src/components')
          }  
        }
      })
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dogface07

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值