从零搭建 vite + vue 3

1.安装node

直接从官网下载安装，选择好路径，即可。

2.修改全局安装各种库路径配置

npm config ls   //查看配置

npm config set prefix d:\your_path   //修改全局安装路径

npm config set cache d:\your_cach_path   //修改缓存配置

3.安装cnpm

npm -g install cnpm --registry=https://registry.npm.taobao.org

4.安装vue3和vite

cnpm install -g vue@next

cnpm install -g vite

4.建立项目

npm init @vitejs/app   //通过交互式输入完成

npm init @vitejs/app --template vue   //通过交互式输入完成但直接指定vue，因为vite还支持其他

cd  项目名   //进入项目目录

npm install

5.启动调试

   不明原因，vite命令启动调试后，页面不加载，浏览器提示未定义 __DEFINE__；但直接用npm run dev 也不行。

经测试，先启动下vite，退出后，再用npm run dev启动调试即可。

6.构建项目与预览网站

vite build

vite preview

7.多页vue

vite.config.js内容如下：

// import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')

// https://vitejs.dev/config/
// export default defineConfig({
//   plugins: [vue()],
  
// })

module.exports = {
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        mmain: resolve(__dirname, 'mindex.html')
      }
    }
  }
}