【每天一个小笔记】02 Vue项目的基本配置

最新推荐文章于 2025-11-30 22:23:34 发布

原创最新推荐文章于 2025-11-30 22:23:34 发布 · 769 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #vue.js #前端

VUE 专栏收录该内容

6 篇文章

订阅专栏

安装依赖

确保已安装最新版 Node.js（建议 16+）。使用以下命令创建 Vue 项目：

npm create vite@latest my-vue-app

或通过 Yarn：

yarn create vite my-vue-app --template vue

目录结构说明

初始生成的目录结构如下：

my-vue-app/
├── public/          # 静态资源（直接复制到构建输出目录）
├── src/             # 项目源码
│   ├── assets/      # 静态资源（由构建工具处理）
│   ├── components/  # 公共组件
│   ├── App.vue      # 根组件
│   └── main.js      # 应用入口文件
├── vite.config.ts   # Vite 配置文件
└── package.json

常用配置修改

打开项目目录下 vite.config.ts 进行基础配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  resolve: {
    // 配置别名
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
})

代码解析

这段代码是Vite的配置文件（vite.config.js或vite.config.ts），用于自定义Vite构建工具的行为。主要包含插件配置、开发服务器代理和路径别名等功能。

模块导入部分

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

defineConfig：Vite提供的类型提示辅助函数，帮助自动补全配置项
@vitejs/plugin-vue：官方提供的Vue单文件组件支持插件
path.resolve：Node.js路径模块的方法，用于处理文件路径

配置主体

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
})

配置项详解

插件配置

plugins: [vue()]

启用Vue单文件组件支持
这是Vue项目使用Vite的必要插件

开发服务器配置

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true,
      secure: false,
      rewrite: (path) => path.replace(/^\/api/, ''),
    }
  }
}

配置API请求代理，解决开发环境跨域问题
所有以/api开头的请求会被代理到http://localhost:8000
changeOrigin: true：修改请求头中的host为目标地址
secure: false：不验证SSL证书
rewrite：重写路径，移除/api前缀

路径解析配置

resolve: {
  alias: {
    '@': resolve(__dirname, 'src')
  }
}

设置路径别名@指向项目src目录
在代码中可以通过@/components/Example.vue形式引入文件
__dirname表示当前配置文件所在目录

典型应用场景

Vue 3项目开发环境配置
需要后端API代理的前后端分离项目
希望使用路径别名简化导入语句的项目

注意事项

代理配置仅在开发环境生效
路径别名需要配合IDE或TypeScript配置才能获得代码提示
生产环境部署时需要确保API地址正确配置

更多的配置信息可以通过查看Vite的官方文档进行了解。

配置 CSS 预处理器

安装 Sass：

npm install -D sass

“-D” 是 “--save-dev” 的缩写，意味着将安装的包作为开发依赖记录到项目的 package.json 文件中，开发依赖主要用于开发过程中，如构建工具、测试框架等，项目部署到生产环境时通常不需要这些依赖；这样在生产环境下就不会产生额外的资源消耗。

在组件中直接使用：

<style lang="scss">
$primary-color: #42b983;
.text {
  color: $primary-color;
}
</style>

配置路由

安装 Vue Router：

npm install vue-router@4

创建 src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

在 main.js 中挂载路由：

import router from './router'

createApp(App).use(router).mount('#app')

配置状态管理（Pinia）

安装 Pinia：

npm install pinia

创建 src/stores/counter.js：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在 main.js 中启用：

import { createPinia } from 'pinia'

createApp(App).use(createPinia()).mount('#app')

生产环境优化

在 vite.config.js 中添加构建配置：

build: {
  outDir: 'dist',           // 输出目录
  assetsInlineLimit: 4096,  // 小于此值的资源转为 base64
  rollupOptions: {
    output: {
      manualChunks: {       // 代码分割
        vendor: ['vue', 'vue-router']
      }
    }
  }
}

结尾补充说明

1、在Vue中public目录下的文件和assets目录下的文件的区别：

在Vue项目中，静态资源通常分为两类：public目录下的文件和assets目录下的文件。两者的主要区别在于处理方式和适用场景。

public目录下的文件：

存放位置：位于项目根目录的public文件夹中。
处理方式：文件会被直接复制到最终构建的目录中，不会被Webpack处理。
引用方式：可以直接通过绝对路径引用，例如/img/logo.png。
适用场景：适合存放无需Webpack处理的文件，如大型媒体文件、第三方库（未通过npm安装）或需要保留原始文件名的资源。

assets目录下的文件

存放位置：位于src/assets文件夹中。
处理方式：文件会经过Webpack处理，包括压缩、哈希命名等优化。
引用方式：需要通过相对路径或模块系统引用，例如require('@/assets/logo.png')。
适用场景：适合存放需要Webpack优化的资源，如图片、字体、样式文件等。

在某些情况下，使用 assets 确实可以更节约资源，尤其是在处理静态文件或预加载内容时。以下是具体原因和优化方法：

资源加载效率

public 由于文件未经优化（如压缩、哈希命名），可能影响加载速度。浏览器缓存策略需手动配置。

assets 通常用于存储静态文件（如图片、字体、配置文件等），这些文件在编译时被打包到应用中，避免了运行时网络请求的开销。相比动态加载资源，减少了延迟和带宽消耗。

内存管理

预加载的 assets 可以通过内存缓存机制重复使用，避免频繁创建和销毁对象。例如，在游戏开发中，将常用纹理或音效放在 assets 中，可以减少实时加载的性能损耗。

代码优化

通过 assets 加载的资源路径是固定的，编译器可能对其进行优化（如资源压缩或索引）。动态路径的资源无法享受同类优化。

示例代码（Android）

val inputStream = context.assets.open("config.json")
val jsonString = inputStream.bufferedReader().use { it.readText() }

注意事项

过大的 assets 会增加安装包体积，需权衡资源使用频率。
动态更新的内容不适合放在 assets 中，应使用网络或本地存储。

通过合理规划静态资源与动态资源的分配，可以显著提升应用性能。

选择建议

如果资源需要Webpack处理（如压缩、哈希命名），优先使用assets目录。
如果资源需要保留原始文件名或直接引用，使用public目录。

示例代码

引用assets目录下的图片：

<img :src="require('@/assets/logo.png')" alt="Logo">

引用public目录下的图片：

<img src="/img/logo.png" alt="Logo">

2、为什么要使用CSS预处理器

①提升开发效率

CSS预处理器（如Sass、Less、Stylus）允许使用变量、嵌套规则、混合（Mixins）等功能，减少重复代码。通过逻辑和动态生成样式，开发者能更快编写和维护复杂样式，尤其适合大型项目。

②增强代码可维护性

通过变量集中管理颜色、字体等属性，修改时只需调整变量值，无需全局搜索替换。嵌套语法使代码结构更清晰，与HTML层级对应，降低维护成本。

③支持模块化与复用

预处理器支持将样式拆分为多个文件，通过@import合并编译为单一CSS文件。混合（Mixins）和函数（Functions）功能可封装重复代码片段，提升复用率。

④兼容性与扩展性

自动添加浏览器前缀（如-webkit-、-moz-）解决兼容性问题。内置函数（如颜色运算、条件判断）扩展了CSS的编程能力，简化响应式设计等场景的实现。

⑤优化输出

编译时可压缩CSS文件，移除注释和空格，减少体积。部分工具支持按需生成源映射（Source Maps），便于调试时定位预处理代码位置。