InsGallery 项目启动与配置教程

1. 项目的目录结构及介绍

InsGallery 项目遵循清晰的目录结构，以下是主要目录及其功能的介绍：

InsGallery/
├── app/                # 应用程序主目录，包含主要的业务逻辑
│   ├── src/            # 源代码目录
│   ├── build/          # 构建目录，存放构建相关的文件
│   └── config/         # 配置文件目录
├── assets/             # 资源目录，存放图片、字体等静态资源
├── dist/               # 打包后的文件存放目录
├── lib/                # 工具库目录，包含一些第三方库
├── scripts/            # 脚本目录，存放一些自动化脚本
├── test/               # 测试目录，存放单元测试和集成测试代码
├── README.md           # 项目说明文件
├── .gitignore          # Git 忽略文件
└── package.json        # 项目依赖和配置文件

2. 项目的启动文件介绍

项目的启动文件位于 app/src/main.js，这是项目的入口文件。以下是启动文件的主要内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这段代码首先引入了 Vue 框架，然后引入了 App.vue 作为主组件，接着引入了路由器 router 和状态管理器 store。最后创建了一个 Vue 实例，并将其挂载到 DOM 中的 #app 元素上。

3. 项目的配置文件介绍

项目的配置文件位于 app/config/index.js，该文件包含了项目运行时需要的一些基础配置。以下是配置文件的主要内容：

module.exports = {
  // 开发环境配置
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {}
  },

  // 生产环境配置
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: false,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

在这个配置文件中，定义了开发和生产环境的配置。开发环境配置了端口、是否自动打开浏览器、静态资源路径等；生产环境配置了输出的 HTML 文件路径、资源根路径、是否生成 SourceMap 等。这些配置是项目在不同环境下正常运行的基础。