测试开发技术网站

[【原文链接】Vue----Vue项目的目录结构](http://devops-dev.com/article/646)

# Vue 项目的目录结构
VUE项目的目录结构如下所示
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/7a5983de-0ec1-11ee-871c-0242ac110004.png)

* .vscode    
VSCode工具的配置文件，和VUE项目没有什么关系

* node_modules    
VUE项目运行依赖文件，通过npm install 安装的文件即存放在此文件夹

* public    
资源文件夹（浏览器图标等）

* src    
源码文件夹，新写代码即存放在此文件夹

* .gitignore    
git忽略文件

* index.html    
入口的html文件，比如新建vue项目的html文件内容如下所示

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
```

* package.json   
信息描述文件，包含项目的版本、依赖等，比如这里内容如下所示，比如这里vite为构建工具。

```json
{
  "name": "vue_demo",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.3.9"
  }
}
```

* README.md
注释文件，可以编写项目描述等等说明性文件

* vite.config.js
VUE 项目的配置文件，这里可以配置比如跨域等等。

```js
import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
```

测试开发技术网站

博客