Vue移动端脚手架：基于Vite构建高效开发环境

2023-09-05 05:05:57

前言：为何选择Vite？

在开始搭建脚手架之前，让我们先了解一下为什么选择Vite作为构建工具。Vite是一个极速的开发环境，可以帮助您以更快的速度构建现代Web应用程序。它采用模块化架构，利用浏览器内置的原生ES模块加载器来加载应用程序代码，无需构建步骤，从而显著提升开发效率。

此外，Vite还提供了一系列开箱即用的特性，例如：

热模块替换（HMR）：允许您在保存代码后自动更新应用程序，无需重新加载页面。
按需加载：Vite只会加载您正在使用的代码，这可以减少应用程序的初始加载时间。
代码分割：Vite可以将您的应用程序代码分割成更小的块，这可以加快加载速度。
代理支持：Vite支持代理服务器，允许您在本地开发环境中访问远程API。
Typescript支持：Vite开箱即用支持Typescript，因此您可以轻松地使用Typescript构建应用程序。

搭建Vue移动端脚手架

现在，让我们开始搭建Vue移动端脚手架。我们将使用Vite作为构建工具，并使用Vue3作为前端框架。

首先，安装Vite：

npm install -g vite

接下来，创建一个新的Vue项目：

mkdir my-vue-mobile-app
cd my-vue-mobile-app
vite init vue

选择“默认”（Default）预设，然后按照提示安装依赖项。

安装完成后，您可以在项目根目录下找到一个名为package.json的文件。在这个文件中，您会看到以下内容：

{
  "name": "my-vue-mobile-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.31",
    "vite": "^3.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0"
  }
}

这个文件定义了项目的名称、版本、依赖项和脚本。

配置项目

现在，让我们配置项目。在项目根目录下，找到vite.config.js文件。在这个文件中，您可以配置Vite的各种选项。

以下是配置示例：

export default {
  // 项目根目录
  root: 'src',
  // 公共路径
  base: '/my-vue-mobile-app/',
  // 开发服务器端口
  port: 3000,
  // 开启HMR
  hmr: true,
  // 代码分割
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]',
      },
    },
  },
  // Vite插件
  plugins: [
    vue(),
  ],
};