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