关于vite初始化项目参考自 https://vitejs.cn/
设置基于自生产上线项目所使用设置
vite.config.js
导入模块内容
import { defineConfig } from 'vite' #vite设置import vue from '@vitejs/plugin-vue' #vueimport vueJsx from '@vitejs/plugin-vue-jsx' #支持jsximport viteSvgIcons from 'vite-plugin-svg-icons' # svgimport { resolve } from "path"; # 引用项目地点import OptimizationPersist from 'vite-plugin-optimize-persist' import PkgConfig from 'vite-plugin-package-config' #办理加载痴钝自动添补package.jsonimport legacy from '@vitejs/plugin-legacy' #欣赏器兼容import importToCDN from 'vite-plugin-cdn-import' # node_modules内容走CDN设置 缓解打包过大加载慢(服务器带宽不敷)设置alias
// search pathconst pathResolve = (dir) => { return resolve(__dirname, ".", dir);};//set aliasconst 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 pathconst pathResolve = (dir) => { return resolve(__dirname, ".", dir);};//set aliasconst 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() } } } } },}) |
