vue目录结构 和环境配置 服务端配置

后台服务端搭建(数据库存入数据) 在

在defult.jsonwenjian 中

 

 

vue-cli目录结构：

vue-cli目录解析：

1. build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。
2. config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
3. dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
4. node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
5. src: 存放项目源码及需要引用的资源文件。
6. src下assets：存放项目中需要用到的资源文件，css、js、images等。
7. src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
8. src下emit：自己配置的vue集中式事件管理机制。
9. src下router：vue-router vue路由的配置文件。
10. src下service：自己配置的vue请求后台接口方法。
11. src下page：存在vue页面组件的文件夹。
12. src下util：存放vue开发过程中一些公共的.js方法。
13. src下vuex：存放 vuex 为vue专门开发的状态管理器。
14. src下app.vue：使用标签<route-view></router-view>渲染整个工程的.vue组件。
15. src下main.js：vue-cli工程的入口文件。
16. index.html：设置项目的一些meta头信息和提供<div id="app"></div>用于挂载 vue 节点。
17. package.json：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。

 

 

config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置

build命令后   在huild文件下

build 对象下 对于 生产环境 的配置：

• index：配置打包后入口.html文件的名称以及文件夹名称
• assetsRoot：配置打包后生成的文件名称和路径
• assetsPublicPath：配置 打包后 .html 引用静态资源的路径，一般要设置成 "./"
• productionGzip：是否开发 gzip 压缩，以提升加载速度

index：path.resolve(__dirname, '../dist/index.html') //模板
assetsRoot： path.resolve(__dirname, '../dist') //打包后文件要存放的路径，一般为dist
assetsSubDirectory：'static' //把所有的静态文件打包到dist文件下的static文件内
assetsPublicPath：'/' //代表生成的index.html文件，里面引入资源时，路径前面要加上 / 

dev 对象下 对于 开发环境 的配置：

assetsSubDirectory //除了index.html之外的静态资源要存放的路径
assetsPublicPath //代表打包后，index.html里引用资源的相对地址
proxyTable //在这个里面可以配置反向代理 用以解决 跨域 问题
host //主机名
port //端口号
autoOpenBrowser //是否自动打开浏览器

 package.json 里面的配置

 

• dependencies：生产环境依赖包的名称和版本号，即这些 依赖包 都会打包进 生产环境的JS文件里面
• devDependencies：开发环境依赖包的名称和版本号，即这些 依赖包 只用于 代码开发 的时候，不会打包进 生产环境js文件 里面。

 

 

vue-cli2搭以上是建的项目，如果是vue-cli3搭建的话assetsPublicPath的配置内容就换位置咯，属性名都换了=>vue.config.js中的publicPath的属性下配置

---

这样开发环境的相关流程就走完了，接下来是三大环境中剩下的生产环境
首先，生产环境是怎么来的，也就是说，我执行怎样的语句或者命令，项目就认为我是一个生产环境，没错，这个命令就是 npm run build，执行这个语句的动作就是打包项目
首先看图说话

执行命令之后就走build文件夹下的build.js文件，打开build.js，看到下图

build文件夹下的webpack.prod.conf.js文件里面是对生产环境做的一些环境配置