Vite 新建项目

新建项目

#  进入新建项目的目录
cd ~
#  [project-name] 项目名称
npm init @vitejs/app [project-name]

直接构建方法

个人 npm 为 6.x

# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# or
npm init @vitejs/app my-vue-app --template vue-ts

# npm 7+, 需要额外的双破折号：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

新建项目目录

其中 vite.config.js文件为自动创建的, 并非人为手动创建

package.json文件：

{
  "name": "vue3-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "vite": "^2.4.4"
  }
}

项目运行

npm run dev 启动后只有 http://localhost:5000

在 vite.config.js 中添加 server.host

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

添加后重新运行npm run dev

vite.config.js 配置可参考一下连接:
https://www.bookstack.cn/books/vitejs-2.2-zh