vite vue3 config设置篇

程序员 · 2024-9-18 05:08:05

关于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()       }       }    } }  },})

vite vue3 config设置篇

所属分类: 问答交流

新帖推荐: 30日

推荐作品