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')
          }  
        }
      })
}

最后

以上就是超帅微笑为你收集整理的Vue 3 + Typescript + Vite + vant3 搭建移动端通用架子的全部内容，希望文章能够帮你解决Vue 3 + Typescript + Vite + vant3 搭建移动端通用架子所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。