vite vue 单页面优化

最新推荐文章于 2024-08-20 17:27:35 发布

fankse

最新推荐文章于 2024-08-20 17:27:35 发布

阅读量599

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/fankse/article/details/127496195

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vite配置开发环境，包括引入插件、处理环境变量、动态创建json文件并记录版本信息。还展示了如何配置服务器代理和处理文件系统操作，如创建public文件夹及写入version.json。

摘要由CSDN通过智能技术生成

import { resolve } from 'path'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import svgLoader from 'vite-svg-loader'
import eslint from 'vite-plugin-eslint'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import viteCompression from 'vite-plugin-compression';


const fs = require('fs')
const path = require('path')

const config = loadEnv('development', process.cwd())
const baseUrl = config.VITE_APP_BASE_API_PROXY

// console.log('config---',config)

// if(config.VITE_BUILD_ENV==='development' || config.VITE_BUILD_ENV==='release'){
let json_obj = { version_str: new Date().getTime().toString() }
fs.mkdir(path.join(__dirname, '../public/json'), { recursive: true }, err => {
  if (err) {
    return console.error(err)
  }
  console.log('创建public文件夹成功')
  fs.writeFile(path.resolve(__dirname, '../public/json/version.json'), JSON.stringify(json_obj), function (err) {
    if (err) {
      return console.error(err)
    }
    console.log('打包字符串写入文件：static/json/version.json，成功！')
  })
})
// }

export default defineConfig({
  mode: 'development',
  server: {
    open: false,
    port: 9529,
    fs: {
      strict: true
    },
    hmr: true // 开启热更新
    // proxy: {
    //   '/oms': {
    //     target: 'http://localhost:7000', // 代理的线上的接口地址
    //     // 如果要代理 websockets
    //     ws: true,
    //     changeOrigin: true,
    //     rewrite: (path)=>path.replace('/oms/','/')
    //   },
    //   "^/[cmsomsbmswmswms]+/api":{
    //     target: baseUrl,
    //     ws: true,
    //     changeOrigin: true,
    //     // pathRewrite: {   //重写路径，这种是没有我们定义的前缀
    //     //   ['^' + process.env.VUE_APP_BASE_API]: ''
    //     // }
    //   }
    // }
  },
  plugins: [
    vue({
      template: {
        transformAssetUrls: {
          img: ['src', 'public'],
          image: ['src', 'public'],
          'a-image': ['src', 'xlink:href', 'public']
        }
      }
    }),
    vueJsx(),
    svgLoader({ svgoConfig: {} }),
    vueSetupExtend(),
    // 打包压缩，主要是本地gzip，如果服务器配置压缩也可以
    viteCompression(),
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, '../src')
      },
      //   {
      //     find: 'assets',
      //     replacement: resolve(__dirname, '../src/assets')
      //   },
      {
        find: 'vue-i18n',
        replacement: 'vue-i18n/dist/vue-i18n.cjs.js' // Resolve the i18n warning issue
      },
      {
        find: 'vue',
        replacement: 'vue/dist/vue.esm-bundler.js' // compile template
      }
    ],
    extensions: ['.ts', '.js']
  },
  define: {
    'process.env': {}
  },
  build: {
    chunkSizeWarningLimit: 500,
    // minify: 'terser',
    manifest: true,
    cssCodeSplit: false,
    // terserOptions: {
    //   compress: {
    //     // warnings: false,
    //     drop_console: true,  //打包时删除console
    //     drop_debugger: true, //打包时删除 debugger
    //     pure_funcs: ['console.log'],
    //   },
    //   output: {
    //     // 去掉注释内容
    //     comments: true,
    //   },
    // },
    rollupOptions: {
      output: {
        // 入口文件名
        entryFileNames: 'assets/[name]-[hash].js',
        // 块文件名
        chunkFileNames: 'assets/[name]-[hash].js',
        // 资源文件名 css 图片等等
        // -[hash]-balabala
        assetFileNames: 'assets/[name]-[hash].[ext]',
        manualChunks: {
          // 拆分代码，这个就是分包，配置完后自动按需加载
          vue: ['vue', 'vue-router'],
          arcoDesign: ['@arco-design/web-vue'],
          echarts: ['echarts'],
          lodash: ['lodash'],
          vueEcharts: ['vue-echarts']
          // echarts: ['echarts'],
        },
      },
    },
    reportCompressedSize: false, // 启用/禁用 gzip 压缩大小报告
  }

})