阅读量:132
关于vite初始化项目参考自 https://vitejs.cn/
配置基于自生产上线项目所使用配置
vite.config.js
导入模块内容
import { defineConfig } from 'vite' #vite配置 import vue from '@vitejs/plugin-vue' #vue import vueJsx from '@vitejs/plugin-vue-jsx' #支持jsx import viteSvgIcons from 'vite-plugin-svg-icons' # svg import { resolve } from "path"; # 引用项目地址 import OptimizationPersist from 'vite-plugin-optimize-persist' import PkgConfig from 'vite-plugin-package-config' #解决加载缓慢自动填充package.json import legacy from '@vitejs/plugin-legacy' #浏览器兼容 import importToCDN from 'vite-plugin-cdn-import' # node_modules内容走CDN配置 缓解打包过大加载慢(服务器带宽不够) 配置alias
// search path const pathResolve = (dir) => { return resolve(__dirname, ".", dir); }; //set alias const alias = [ { find: '@', replacement: pathResolve("src") }, { find: '~', replacement: pathResolve("./") }, { find: "@build", replacement: pathResolve("build")} ]; defineConfig server
server:{ https: false, //本地环境不用https hrm: true, port: 8080, //本地端口 host: '0.0.0.0', proxy: { //反向代理配置 '/api': { target: 'http://localhost:8090/', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } }, }, defineConfig plugins
添加项目中引用添加svg项 浏览器兼容问题 以及所需框架使用cdn加速(因服务器带宽有限不想打包时过大加载过慢问题)
plugins: [ vue(), vueJsx(), // 配置svg项 监听项目路径地址 并做icon替换 viteSvgIcons({ iconDirs: [resolve(process.cwd(), 'src/icons/svg')], symbol: 'icon-[dir]-[name]' }), PkgConfig(), OptimizationPersist(), legacy({ targets: ['ie >= 11'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'] }), importToCDN({ modules: [ { name:'vue', var:'Vue', path:'https://npm.elemecdn.com/vue@3.2.25/dist/vue.global.prod.js' }, { name:'vuex', var:'Vuex', path:'https://npm.elemecdn.com/vuex@4.0.2/dist/vuex.global.prod.js' }, { name:'vue-router', var:'VueRouter', path:'https://npm.elemecdn.com/vue-router@4.0.12/dist/vue-router.global.prod.js' }, { name: 'element-plus', var: 'ElementPlus', path: `https://npm.elemecdn.com/element-plus@2.1.8/dist/index.full.min.js`, css: 'https://npm.elemecdn.com/element-plus@2.1.8/dist/index.css', }, { name: 'nprogress', var: 'NProgress', path: `https://npm.elemecdn.com/nprogress@0.2.0/nprogress.js`, css: 'https://npm.elemecdn.com/nprogress@0.2.0/nprogress.css', }, { name: 'echarts', var: 'echarts', path: `https://npm.elemecdn.com/echarts@5.3.3/dist/echarts.min.js` } ] }) ], defineConfig resolve
该内容配置@ 及~ 因为习惯于vue-cli 2.x时候import习惯@找文件并且不添加后缀 直接在配置项内添加后缀为.vue,.js以及.json文件
resolve: { alias, extensions: ['.vue', '.js', '.json'] }, defineConfig build
build: { target: 'es2020', cssCodeSplit: false, minify: 'terser', // 混淆器,terser构建后文件体积更小 sourcemap: false, terserOptions: { compress: { drop_console: true, // 生产环境移除console drop_debugger: true // 生产环境移除debugger } }, rollupOptions: { treeshake: false, output: { manualChunks (id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString() } } } } }, 完整配置内容
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import viteSvgIcons from 'vite-plugin-svg-icons' import { resolve } from "path"; import OptimizationPersist from 'vite-plugin-optimize-persist' import PkgConfig from 'vite-plugin-package-config' import legacy from '@vitejs/plugin-legacy' import importToCDN from 'vite-plugin-cdn-import' // search path const pathResolve = (dir) => { return resolve(__dirname, ".", dir); }; //set alias const alias = [ { find: '@', replacement: pathResolve("src") }, { find: '~', replacement: pathResolve("./") }, { find: "@build", replacement: pathResolve("build")} ]; // https://vitejs.dev/config/ export default defineConfig({ base: '/', server:{ https: false, hrm: true, port: 8080, host: '0.0.0.0', proxy: { '/api': { target: 'http://localhost:8090/', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } }, }, plugins: [ vue(), vueJsx(), viteSvgIcons({ iconDirs: [resolve(process.cwd(), 'src/icons/svg')], symbol: 'icon-[dir]-[name]' }), PkgConfig(), OptimizationPersist(), legacy({ targets: ['ie >= 11'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'] }), importToCDN({ modules: [ { name:'vue', var:'Vue', path:'https://npm.elemecdn.com/vue@3.2.25/dist/vue.global.prod.js' }, { name:'vuex', var:'Vuex', path:'https://npm.elemecdn.com/vuex@4.0.2/dist/vuex.global.prod.js' }, { name:'vue-router', var:'VueRouter', path:'https://npm.elemecdn.com/vue-router@4.0.12/dist/vue-router.global.prod.js' }, { name: 'element-plus', var: 'ElementPlus', path: `https://npm.elemecdn.com/element-plus@2.1.8/dist/index.full.min.js`, css: 'https://npm.elemecdn.com/element-plus@2.1.8/dist/index.css', }, { name: 'nprogress', var: 'NProgress', path: `https://npm.elemecdn.com/nprogress@0.2.0/nprogress.js`, css: 'https://npm.elemecdn.com/nprogress@0.2.0/nprogress.css', }, { name: 'echarts', var: 'echarts', path: `https://npm.elemecdn.com/echarts@5.3.3/dist/echarts.min.js` } ] }) ], resolve: { alias, extensions: ['.vue', '.js', '.json'] }, css: { postcss: { plugins: [ { postcssPlugin: 'internal:charset-removal', AtRule: { charset: (atRule) => { if (atRule.name === 'charset') { atRule.remove(); } } } } ], }, }, build: { target: 'es2020', cssCodeSplit: false, minify: 'terser', // 混淆器,terser构建后文件体积更小 sourcemap: false, terserOptions: { compress: { drop_console: true, // 生产环境移除console drop_debugger: true // 生产环境移除debugger } }, rollupOptions: { treeshake: false, output: { manualChunks (id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString() } } } } }, }) 