安装适配样式的插件和配置vite+调整页面样式

haoxuan

2024-01-22 a411e6a6e8baf3a0f0ebf6255f312669903d3754

 vite.config.ts

@@ -6,8 +6,10 @@
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 兼容低版本浏览器
import legacy from '@vitejs/plugin-legacy'
// 打包 兼容低版本浏览器
// import legacy from '@vitejs/plugin-legacy'
// 开发环境兼容
import esbuild from 'rollup-plugin-esbuild'
const pathSrc = path.resolve(__dirname, 'src')

// https://vitejs.dev/config/
@@ -15,7 +17,8 @@
  server: {
    proxy: {
      '/v1/': {
        target: 'http://192.168.20.119:8003',
        // http://192.168.20.119:8003
        target: 'http://192.168.20.25:7010',
        ws: true,
        changeOrigin: true
      }
@@ -28,8 +31,23 @@
  },
  
  build: {
    minify:'terser',
    // ,'edge90','firefox90','safari15'
    target:['chrome52'],
    cssTarget:["chrome52"],
  },
  css:{
      postcss:{
          plugins:[
            require('postcss-pxtorem')({
              // ipad:1280-800
              rootValue:160.0, //换算的基数， 屏幕宽度/10
              propList:['*'],//需要转化的属性，*表示所有属性都需要转化
              // unitPrecision:5
            })
          ]
    }

  },
  plugins: [
    vue(),
@@ -48,32 +66,40 @@

      dts: path.resolve(pathSrc, 'auto-imports.d.ts')
    }),
   
    // 兼容低版本浏览器
    legacy({
      targets: ['defaults', 'ie >= 11', 'chrome < 60','firefox < 59'], //需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      modernPolyfills:true,
      polyfills: [
        'es.symbol',
        'es.array.filter',
        'es.promise',
        'es.promise.finally',
        'es/map',
        'es/set',
        'es.array.for-each',
        'es.object.define-properties',
        'es.object.define-property',
        'es.object.get-own-property-descriptor',
        'es.object.get-own-property-descriptors',
        'es.object.keys',
        'es.object.to-string',
        'web.dom-collections.for-each',
        'esnext.global-this',
        'esnext.string.match-all'
      ]
    // 开发环境兼容
    esbuild({
      target:"chrome64",
      loaders:{
        ".vue":'js',
        ".ts":'js'
      }
    }),
    // 兼容低版本浏览器
    // legacy({
    //   // ie >= 11
    //   targets: ['defaults', 'not IE 11', 'chrome < 60','firefox < 59'], //需要兼容的目标列表，可以设置多个
    //   additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    //   // renderLegacyChunks: true,
    //   modernPolyfills:true,
    //   polyfills: [
    //     'es.symbol',
    //     'es.array.filter',
    //     'es.promise',
    //     'es.promise.finally',
    //     'es/map',
    //     'es/set',
    //     'es.array.for-each',
    //     'es.object.define-properties',
    //     'es.object.define-property',
    //     'es.object.get-own-property-descriptor',
    //     'es.object.get-own-property-descriptors',
    //     'es.object.keys',
    //     'es.object.to-string',
    //     'web.dom-collections.for-each',
    //     'esnext.global-this',
    //     'esnext.string.match-all'
    //   ]
    // }),
    Components({
      resolvers: [
        // 自动注册图标组件
@@ -89,9 +115,10 @@
      autoInstall: true
    }),
  ],
  configureWebpack:config=>{
    config.entry.app=['babel-polyfill','./src/main.js']
  },
  // configureWebpack:config=>{
  //   config.entry.app=['babel-polyfill','./src/main.js']
  // },
  // transpileDependencies:['*']
  // chainWebpack: (config) => {
  //   config.entry('main').add('babel-polyfill')
  // },