简介

前端首先由 Vue3 构建，所以要想写前端第一步要先看vue3 文档。 第二还需要 typescript 的加持

INFO

如果不想用使用 ts，直接在根目录 tsconfig.json 关闭即可

这两个是项目的根基，所以一定要好好看看，其他用到的主要组件

• ElementPlus 官网地址
• tailwindcss 官网地址
• Pinia 官网地址
• icon hero icon

vite 配置

这里就直接用项目的配置一一说明了，不拆开来看了

const rootPath = resolve(__dirname)
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [
      vue({
        script: {
          defineModel: true
        }
      }),
      vueJsx(),
      alias({
        entries: [
          {
            find: '@',
            replacement: resolve(rootPath, './src')
          }
        ]
      }),
      {
        // 监听views文件夹下的vue文件变化，自动重启
        configureServer(server) {
          server.watcher.on('add', (path) => {
            if (path.includes('views') && path.endsWith('.vue')) {
              server.restart()
            }
          })
        }
      },
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia', '@vueuse/core']
        // resolvers: [ ElementPlusResolver({importStyle: 'sass'}) ]
      }),
      Components({
        dirs: ['src/components/', 'src/layout/'],
        extensions: ['vue'],
        // directoryAsNamespace: true,
        deep: true,
        dts: true,
        include: [/\.vue$/, /\.vue\?vue/],
        exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/, 'src/components/catchForm/']
        // resolvers: [ ElementPlusResolver({ importStyle: 'sass'}) ]
      }),
      Icons({
        compiler: 'vue3',
        autoInstall: true
      })
    ],
    publicDir: './public',
    define: {
      BASE_URL: env.BASE_URL
    },
    preprocessorOptions: {
      scss: {
        // additionalData: `@use "@/public/assets/styles/element.scss" as *;`,
      }
    },
    server: {
      hmr: true,
      host: '127.0.0.1',
      port: 10086,
      open: true, // 自动打开浏览器
      cors: true, // 允许跨域
      strictPort: true, // 端口占用直接退出
      watch: {},
      proxy: {
        // 处理跨域
        '/api': {
          target: env.VITE_BASE_URL, // 后端接口地址
          changeOrigin: true, // 修改请求头中的 origin 为目标地址
          rewrite: (path) => path.replace(/^\/api/, '') // 可选：移除请求路径中的 /api 前缀
        }
      }
    },
    build: {
      // 打包文件大小警告的限制（单位kb）
      chunkSizeWarningLimit: 2000,
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: false,
          pure_funcs: ['console.log', 'console.info'],
          drop_debugger: true
        }
      },
      // 打包输出目录
      outDir: '../public/admin',
      assetsDir: 'assets',
      rollupOptions: {
        input: './index.html',
        output: {
          chunkFileNames: 'assets/js/[name]-[hash].js',

          entryFileNames: 'assets/js/[name]-[hash].js',

          assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
        }
      }
    }
  }
})

INFO

vite 的环境变量都需要在前面加上 VITE 前缀，在 vite.config.js 使用的时候直接访问 env.BASE_URL即可

但是如果打包的话，还需要添加 .env.production 配置文件，里面配置

// api url 接口地址
VITE_BASE_URL = API_URL