创建vite项目全流程

最新推荐文章于 2025-09-12 10:51:28 发布

原创

最新推荐文章于 2025-09-12 10:51:28 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文介绍了如何从零开始手动配置vite项目，包括设置vue-router、vuex、axios和element-plus。通过执行特定命令安装依赖，并按步骤配置相关文件，最终实现项目的完整搭建。虽然过程繁琐，但能深入理解每个组件的配置细节。

创建vue3项目有两种方式，vite和vue cli,本文主要介绍vite项目的创建流程。

可惜的是vite没有脚手架，router、vuex、axios、element-plus、eslint等全要自己手动一个个引入，还各种报错，分分钟让你吐血，费了九牛二虎之力终于搭建成功。想图省事还是建议vue cli。

一、创建vite

1）执行命令：cnpm create vite@latest

按提示一步步操作下去

2）用开发者工具（webStorm或vsCode）打开项目得到如下目录

创建后要install一下

执行命令：cnpm install

3）执行命令：cnpm run dev

浏览器输入网址看到如下内容证明启动成功

4）打开vite.config.js，按如下代码配置启动端口和代理

export default defineConfig({
    server: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': { // 请求接口中要替换的标识
                target: 'http://117.62.22.235:17009', // 代理地址
                changeOrigin: true, // 是否允许跨域
                secure: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
}