vite构建vue项目

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000, // 设置开发服务器的端口
    open: true, // 自动打开浏览器
  },
  build: {
    outDir: 'dist', // 构建输出目录
  }
});

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

// src/App.vue
<template>
  <div id="app">
    <h1>Hello Vite + Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

1. vite.config.js:

   • 使用 defineConfig 和 @vitejs/plugin-vue 来配置 Vite。
   • server.port 设置开发服务器的端口号为 3000。
   • server.open 设置为 true，表示启动开发服务器时自动打开浏览器。
   • build.outDir 设置构建输出目录为 dist。

2. src/main.js:

   • 使用 createApp 方法创建 Vue 应用实例，并挂载到页面中的 #app 元素上。

3. src/App.vue:

   • 定义了一个简单的 Vue 组件，包含模板、脚本和样式部分。
   • 模板中显示 "Hello Vite + Vue!" 文本。
   • 样式部分设置了字体、对齐方式和颜色等样式属性。