vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vite教程

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

作者：一花一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/, '')
      }
    }
  }
});

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

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 配置文件，包括了以下配置选项：

接下来，我们可以在 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教程的资料请关注脚本之家其它相关文章！

阅读全文