uni-app5+app打包,vue3开发vite.config.js的配置

import {
    defineConfig,
    loadEnv
} from 'vite'
import vue from '@vitejs/plugin-vue'
import {
    resolve
} from 'path'
/* 一个按需自动导入Vue/Vue Router等官方Api的插件 */
import AutoImport from 'unplugin-auto-import/vite'
/* 解决vue3下 script setup语法糖 下 ,手动设置组件name不方便的问题 */
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
/* 打包体积分析插件 */
import {
    visualizer
} from 'rollup-plugin-visualizer'
/* 打包压缩 */
import viteCompression from 'vite-plugin-compression'
import legacy from '@vitejs/plugin-legacy';
import Components from 'unplugin-vue-components/vite';
import {
    AntDesignVueResolver
} from 'unplugin-vue-components/resolvers';
export const r = (...args) => resolve(__dirname, '.', ...args)
export default defineConfig(({
    command,
    mode
}) => {
    const envConfig = loadEnv(mode, './')
    return {
        plugins: [
            vue(),
            viteCompression(),
            vueSetupExtend(),
            AutoImport({
                imports: ['vue'],
                dirs: ['./src/utils/permission'],
                dts: r('src/auto-imports.d.ts')
            }),
            /* 1.下面的注释打开,荣耀平板可以用,注释掉小米联想平板可以用 */
            legacy({
                // targets:['chrome 52', "defaults" ,"ie 11"], // 需要兼容的目标列表,可以设置多个
                // targets: ["chrome 80", "defaults", "not IE 11"],

                targets: ['defaults', "ie >= 11", 'chrome 52'], // 需要兼容的目标列表,可以设置多个
                cssTarget: ["chrome52"],
                modernPolyfills: true,
                renderLegacyChunks: true,
                additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件
                polyfills: [
                    'es.symbol',
                    'es.promise',
                    'es.promise.finally',
                    'es/map',
                    'es/set',
                    'es.array.filter',
                    'es.array.for-each',
                    'es.array.flat-map',
                    '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'
                ]
            }),
            visualizer(),
            Components({
                resolvers: [
                    AntDesignVueResolver({
                        importStyle: false, // css in js
                    }),
                ],
            })
        ],

        define: {
            //'process.env': {}
             'process.env.NODE_ENV': JSON.stringify('production')
        },
        server: {
            host: '0.0.0.0',
            port: envConfig.VITE_PORT,
            hmr: true, //开启热更新
            proxy: {
                '/api': {
                    target: envConfig.VITE_APP_API,
                    ws: false,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, '')
                }
            },
        },
        productionSourceMap: false,
        /*打包的时候不输出map文件,减少大量体积*/
        build: {
            assetsPublicPath: './',
            target: ['es2015', "chrome52"],
            /* 2.下面的注释打开,荣耀平板可以用,注释掉小米联想平板可以用 */
            chunkSizeWarningLimit: 1000,
            rollupOptions: {
                output: {
                    manualChunks(id) {
                        if (id.includes('node_modules')) {
                            return id.toString().split('node_modules/')[1].split('/')[0].toString();
                        }
                    }
                }
            },
            minify:'terser'
        },
        base: './',
        // publicPath: './',/*配置打包后的资源路径*/
        resolve: {
            alias: {
                '@': `${resolve(__dirname, 'src')}`,
                '~': `${resolve(__dirname, './')}`,
            },
        },
        css: {
            // css预处理器
            preprocessorOptions: {
                less: {
                    additionalData: `@import "${resolve(__dirname, 'src/assets/style/global.less')}";`,
                    modifyVars: {
                        'primary-color': '#000000'
                    },
                }
            }
        }
    }
})

### 配置和使用 ECharts 要在 uni-app Vue3 TypeScript 项目中集成和使用 ECharts,可以通过以下方法实现: #### 1. 安装依赖 首先需要安装 `echarts` 和其对应的类型声明文件: ```bash pnpm add echarts @types/echarts ``` 这一步确保了项目的运行环境能够识别并加载 ECharts 库及其 TypeScript 类型支持[^1]。 --- #### 2. 创建一个通用的 ECharts 组件 为了方便在多个页面中重用 ECharts 图表功能,可以创建一个独立的组件来封装图表逻辑。以下是该组件的一个简单示例: ##### 文件路径:`components/EchartsComponent.vue` ```vue <template> <view class="chart-container"> <canvas :id="chartId" type="2d"></canvas> </view> </template> <script lang="ts" setup> import { onMounted, ref } from &#39;vue&#39;; import * as echarts from &#39;echarts&#39;; const props = defineProps({ chartId: { type: String, required: true, }, }); onMounted(() => { const canvasElement = document.getElementById(props.chartId); if (canvasElement) { const chartInstance = echarts.init(canvasElement); // 设置初始选项 const option = { title: { text: &#39;ECharts 示例&#39;, }, tooltip: {}, xAxis: { data: [&#39;衬衫&#39;, &#39;羊毛衫&#39;, &#39;雪纺衫&#39;, &#39;裤子&#39;, &#39;高跟鞋&#39;, &#39;袜子&#39;], }, yAxis: {}, series: [ { name: &#39;销量&#39;, type: &#39;bar&#39;, data: [5, 20, 36, 10, 10, 20], }, ], }; chartInstance.setOption(option); // 渲染图表 } }); </script> <style scoped> .chart-container { width: 100%; height: 400px; } </style> ``` 此组件接受一个唯一的 `chartId` 属性作为参数,并初始化了一个基础柱状图实例[^2]。 --- #### 3. 修改 Vite 配置以支持 Canvas 由于 Uni-app 使用的是 HBuilderX 或其他构建工具,默认情况下可能不完全兼容某些第三方库的功能(如 Canvas)。因此,在 `vite.config.ts` 中需额外配置以支持这些特性: ```typescript // vite.config.ts import { defineConfig } from &#39;vite&#39; import uni from &#39;@dcloudio/vite-plugin-uni&#39; export default defineConfig({ resolve: { alias: { &#39;@&#39;: path.resolve(__dirname, &#39;./src&#39;), }, }, plugins: [uni()], }) ``` 上述配置已经包含了基本的别名设置,如果遇到特定问题可进一步调整插件或扩展项[^4]。 --- #### 4. 在页面中调用 ECharts 组件 最后,在某个具体页面中引入刚刚创建好的 ECharts 组件即可完成展示效果: ##### 页面代码示例 (`pages/Index/index.vue`) ```vue <template> <view class="page-content"> <text>这是一个带有 ECharts 的页面</text> <EchartsComponent :chart-id="&#39;myChart&#39;" /> </view> </template> <script lang="ts" setup> import EchartsComponent from &#39;@/components/EchartsComponent.vue&#39;; </script> <style scoped> .page-content { padding: 20px; display: flex; flex-direction: column; align-items: center; } </style> ``` 这样就完成了整个流程中的核心部分——即从安装到实际使用的全过程[^5]。 --- ### 注意事项 - 如果目标平台为微信小程序,则需要注意一些特殊限制条件,比如是否允许动态生成 DOM 节点等问题。 - 对于复杂场景下的性能优化,推荐采用懒加载机制减少资源消耗。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值