vue-vite、node、mysql多页面项目入门，vite多页面打包与IIS服务部署，学习笔记登录注册篇

在开始之前，我们需要安装Node.js和MySQL。

1. 创建项目并安装依赖：

# 全局安装create-vite
npm init vite@latest my-vue-app --template vue
 
# 进入项目目录
cd my-vue-app
 
# 安装依赖
npm install

2. 配置vite.config.js以支持多页面应用：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        // 多页面应用的入口配置
        index: './src/main.js',
        page1: './src/page1.js',
        // 可以添加更多页面
      },
    },
  },
});

3. 在src目录下创建对应的.vue文件，例如main.vue和page1.vue。
4. 配置mysql连接和查询：

// 引入mysql模块
const mysql = require('mysql');
 
// 创建连接对象
const connection = mysql.createConnection({
  host     : 'localhost', // mysql服务地址
  user     : 'root',      // mysql用户名
  password : 'password',  // mysql密码
  database : 'mydatabase' // 数据库名
});
 
// 开始连接
connection.connect();
 
// 执行查询
connection.query('SELECT * FROM mytable', (error, results, fields) => {
  if (error) throw error;
  // 处理查询结果
  console.log(results);
});
 
// 关闭连接
connection.end();

5. 打包项目：

npm run build

6. 配置IIS服务以托管Vite打包后的项目：

• 在IIS中创建网站或应用程序。
• 将vite build输出的静态文件复制到IIS的指定文件夹内。
• 配置网站或应用程序的启动文件（通常是index.html）。

7. 启动IIS服务并通过浏览器访问你的Vite多页面应用。

以上步骤提供了一个简化的流程，实际项目中还需要考虑路由、状态管理、API请求等其他方面的配置。