Vue项目目录结构详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52901974/article/details/126187224

本文详细介绍了Vue项目的目录结构，包括node_modules、public、src等关键目录的作用，以及vue.config.js和.gitignore等重要文件的功能。理解这些有助于代码管理和团队协作，为后续开发提供清晰指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue官方网站

一、目录分析

node_modules 依赖配置

public 公共静态资源目录

src 项目开发目录

- assets 静态资源目录（存放css 、img、js等）

- components 公共组件目录，管理非路由配置组件

- router 路由配置文件

-- index.js 配置路由文件

- store 用于状态管理、共享数据以及各个组件之间管理外部状态，vueX

- views 组件目录，管理路由配置组件

- App.vue 入口组件，配置一级路由

- main.js vue实例化文件

.browserslistrc 配置兼容浏览器

.eslintrc.js 语法检测配置文件

.gitignore git忽略文件

babel.config.js 是一个JS编译器，兼容低版本浏览器，引入babel，将es6转为es5

jsconfig.json 指定根文件和javascript语言服务提供的功能选项

package.json 记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号

package-lock.json 记录了node_modules目录下所有模块（包）的名称、版本号等等

README.md 项目说明文件

vue.config.js 是一个可选的配置文件，如果存在，项目启动时会自动加载

二、目录讲解

1.vue.config.js (根据需要自己配置，还有很多配置)

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭语法检查
  lintOnSave:false,
  //反代理--解决跨域问题
  devServer:{
    //设置端口号 
    port: 8080,  
    //本地ip地址
    host:"localhost", 
    //是否关闭用于DNS（域名服务器）重绑定HTTP请求的HOST检查
    disableHostCheck:true, 
    //是否热部署
    hostOnly:false,
    //配置是否自动启动浏览器
    open: false,
    // https:{type:Boolean}是否启用https   
    https: false,
    //浏览器显示警告与报错
    overlay:{
      warning:true,
      errors:true
    },
    //设置代理（不需要代理设置为null，主要是为了解决跨域）  
    proxy: {
      // 代理，拦截以/api开头的url接口（如有多个代理以键值如下格式再写即可）
      "/api": {
        //目标接口的域名
        target: "http://192.168.0.45:8088", 
        // 是否启用websockets
        ws: false,
        //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        changeOrigin: true,
        // 如果是https接口，需要配置此参数
        secure: false,
        //重写路径
        pathRewrite: {
          "^/api": ""  
        }
      },
      //多个代理
      "/api2": {
        //目标接口的域名
        target: "http://192.168.0.45:8089", 
        // 是否启用websockets
        ws: false,
        //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        changeOrigin: true,
        // 如果是https接口，需要配置此参数
        secure: false,
        //重写路径
        pathRewrite: {
          "^/api2": ""  
        }
      },
    }
  }
});

2. .gitignore （忽略文件）

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?