Vite项目搭建与环境配置的完整版教程

更新时间：2023年09月15日 08:51:57 作者：一花一world

Vite 使用 Rollup 作为默认的构建工具,可以将应用程序的源代码打包成一个或多个优化的静态文件,本文就来为大家介绍一下Vite如何进行项目搭建与环境配置吧

1. 打包构建

Vite 使用 Rollup 作为默认的构建工具。通过运行 npm run build 命令，Vite 会将应用程序的源代码打包成一个或多个优化的静态文件，以便在生产环境中进行部署。Vite 的构建过程会根据需要进行代码拆分、压缩和优化，以提供最佳的性能和文件大小。

# package.json
{
  "scripts": {
    "build": "vite build"
  }
}

2. 环境变量

Vite 支持在项目中使用环境变量。您可以在项目的根目录下创建一个 .env 文件，并在其中定义您需要的环境变量。然后，在您的代码中，可以使用 import.meta.env 对象来访问这些环境变量。Vite 会根据当前的环境自动加载相应的环境变量文件，例如 .env.development、.env.production 等。

# .env
VITE_API_URL=https://api.example.com
VITE_APP_NAME=My App
# main.js
console.log(import.meta.env.VITE_API_URL); // 输出：https://api.example.com
console.log(import.meta.env.VITE_APP_NAME); // 输出：My App

3. 模式

Vite 支持两种模式：开发模式和生产模式。在开发模式下，Vite 会提供一个开发服务器，实现快速的冷启动和热重载，以便在开发过程中获得即时的反馈。在生产模式下，Vite 会对应用程序进行优化和打包，以提供更高的性能和更小的文件大小。

# package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

4. 兼容老浏览器

Vite 默认情况下不支持老版本的浏览器，因为它使用了一些现代的 JavaScript 特性和浏览器原生模块的功能。但是，您可以通过配置文件来启用对老浏览器的支持。通过设置 target 选项为 es2015，并使用 @vitejs/plugin-legacy 插件，您可以将您的应用程序转换为兼容老浏览器的代码。

# vite.config.js
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
  plugins: [
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
});

5. TypeScript 相关

Vite 对 TypeScript 提供了原生的支持。您可以在项目中使用 TypeScript 来编写代码，并且 Vite 会自动识别和编译 TypeScript 文件。在使用 TypeScript 的同时，您可以享受到 Vite 带来的快速的冷启动和热重载的特性。

# main.ts
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');

6. 基本配置

Vite 的基本配置可以通过一个名为 vite.config.js 的配置文件进行设置。在这个配置文件中，您可以自定义各种选项，例如入口文件、输出路径、插件配置等。您还可以根据需要使用不同的插件来扩展 Vite 的功能。

# vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  root: './src',
  base: '/my-app/',
  plugins: [],
  build: {
    outDir: '../dist',
    assetsDir: 'assets',
    sourcemap: true
  }
});

7.核心配置全集

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';
import { resolve } from 'path';
export default defineConfig({
  root: resolve(__dirname, './src'),
  base: '/my-app/',
  build: {
    outDir: resolve(__dirname, './dist'),
    assetsDir: 'assets',
    sourcemap: true,
    rollupOptions: {
      external: ['axios'],
      output: {
        globals: {
          axios: 'axios'
        }
      }
    }
  },
  plugins: [
    vue(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

root：指定项目的根目录路径。
base：指定项目的基础路径，用于指定静态资源的引用路径。
build：用于配置构建相关的选项，包括输出目录、静态资源目录、是否生成源映射等。
plugins：用于配置 Vite 插件，例如 @vitejs/plugin-vue 和 @vitejs/plugin-legacy。
server：用于配置开发服务器的选项，包括端口号、代理等。

此外，示例代码中还展示了一些其他的配置选项的使用：

rollupOptions：用于配置 Rollup 的选项，例如外部依赖和全局变量。
proxy：用于配置开发服务器的代理选项，用于将请求代理到其他服务器。

8.整体代码示例

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000
  }
});

这是一个基本的 Vite 配置文件，包括了以下配置选项：

plugins：使用 @vitejs/plugin-vue 插件来支持 Vue 单文件组件。
resolve.alias：设置别名，将 @ 指向项目的 src 目录，方便在代码中使用绝对路径引入模块。
server.port：设置开发服务器的端口号为 3000。

接下来，我们可以在 src 目录下创建一个简单的 Vue 应用：

<!-- App.vue -->
<template>
  <div>
    <h1>Hello Vite!</h1>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Welcome to Vite!'
    };
  }
};
</script>
<style>
h1 {
  color: blue;
}
</style>

// main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

在项目根目录下运行 npm install 安装依赖，然后使用 npm run dev 启动开发服务器。在浏览器中打开 http://localhost:3000，您将看到一个简单的 Vue 应用，显示 “Hello Vite!” 和 “Welcome to Vite!”。

以上就是Vite项目搭建与环境配置的完整版教程的详细内容，更多关于Vite教程的资料请关注脚本之家其它相关文章！

Vue3嵌套路由中使用keep-alive缓存多层的实现
本文介绍了Vue3 嵌套路由中使用 keep-alive缓存多层的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
基于Vue.js与WordPress Rest API构建单页应用详解
这篇文章主要介绍了基于Vue.js与WordPress Rest API构建单页应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
vue.js 微信支付前端代码分享
下面小编就为大家分享一篇vue.js 微信支付前端代码。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue3+element-plus动态路由菜单示例代码
这篇文章主要介绍了vue3+element-plus动态路由菜单示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
一文详细聊聊vue3的defineProps、defineEmits和defineExpose
vue3官方文档defineProps和defineEmits都是只能在scriptsetup中使用的编译器宏,下面这篇文章主要给大家介绍了关于vue3的defineProps、defineEmits和defineExpose的相关资料,需要的朋友可以参考下
2023-02-02
vue项目中使用pinyin转换插件方式
这篇文章主要介绍了vue项目中使用pinyin转换插件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue开发调试神器vue-devtools使用详解
这篇文章主要为大家详细介绍了vue开发调试神器vue-devtools的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue实现数字动态翻牌器
这篇文章主要为大家详细介绍了vue实现数字动态翻牌器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue如何使用CSS自定义变量
这篇文章主要介绍了Vue如何使用CSS自定义变量，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-05-05
Vue中qs插件的使用详解
这篇文章主要介绍了Vue中qs插件的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02