Vue3 + Vite2 后台项目基本搭建

项目搭建

npm init vite-app
Project-name: <your-project-name>
Select a framework: 选择一个框架
Select a variant: 选择语言

Vite.config.js 配置(非必要,根据项目需求配置)

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    base: VITE_APP_ENV === 'production' ? '/' : '/',
    plugins: createVitePlugins(env, command === 'build'),
    resolve: {
      // https://cn.vitejs.dev/config/#resolve-alias
      alias: { // 需配置才能使用~ / @导入文件
        // 设置路径
        '~': path.resolve(__dirname, './'), 
        // 设置别名
        '@': path.resolve(__dirname, './src'), 
      },
      // https://cn.vitejs.dev/config/#resolve-extensions
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    },
    // vite 相关配置
    server: {
      port: 80,
      host: true,
      open: true,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, ''),
        },
      },
    },
    //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
    css: {
      postcss: {
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') {
                  atRule.remove()
                }
              },
            },
          },
        ],
      },
    },
    root:  './',
    entry: 'index.html', // 入口
    base: './', // 打包根路径
    publicDir: 'public', // 静态资源服务的文件夹
    ssr: false,  // 是否开启ssr服务断渲染
    esbuild: { // jsx 语法支持
      jsxFactory: 'h',
      jsxFragment: 'Fragment',
    },

    silent: false, // 开启控制台输出日志

    optimizeDeps: [ // 哪个第三方的包需要重新编译
      // exclude: ['axios', 'qs', 'vue', 'vuex']
    ],
    //编译
    build: {
      outDir: './build', // 打包文件放置目录
      assetsDir: 'static',  // 输出的静态资源的文件夹名称
      sourcemap: false, //构建后是否生成 source map 文件
      // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
      assetsInlineLimit: 4096,
      cssCodeSplit: true, //  禁用或者启用 CSS 代码拆分
      write: true, // 禁用或者启用将构建后的文件写入磁盘
      emptyOutDir: true,  //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
      brotliSize: true,  // 启用/禁用 brotli 压缩大小报告
      chunkSizeWarningLimit: 500, // chunk 大小警告的限制
      manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
      rollupOptions: {  // 自定义底层的 Rollup 打包配置
        // 确保外部化处理那些你不想打包进库的依赖
        // external: ['vue', 'nf-tool'],
        // 输出配置
        output: {
          // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
          // globals: { vue: 'Vue', 'nf-tool': 'nfTool' },
          // 自定义输出文件名
          // chunkFileNames: 'static/js1/[name]-[hash].js',
          // entryFileNames: 'static/js2/[name]-[hash].js',
          // assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          // brotliSize: false, // 不统计
          // target: 'esnext',
          // minify: 'esbuild' // 混淆器，terser 构建后文件体积更小
        },
      },
      // @rollup/plugin-commonjs 插件的选项
      commonjsOptions: {},
      // terser 构建后文件体积更小
      minify: 'terser',
      // 传递给 Terser 的更多 minify 选项。
      terserOptions: {
        compress: { drop_console: true, drop_debugger: true }, // 去除 console
      },
    },
  }
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import router from './router'
import 'element-plus/lib/theme-chalk/index.css'
// 引入字体图标
import './assets/font/iconfont.css'
// 使用vuex
import store from './store'
// 引入mock
import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'development') {
  mockXHR()
}
const app = createApp(App)
// 全局组件
// import TkBadge from './components/Test'
// app.component('Test', Test)
// 全局方法挂载
// app.config.globalProperties.$methods = Methods
app.use(ElementPlus).use(router).use(store)
app.mount('#app')