vue2.0项目组成

VUE2.0项目组成和打包发布

vue项目结构图：
|— build # (webpack配置相关)
| |— build-server.js # 运行本地构建服务器，可以访问构建后的页面
| |— build.js # 生产环境构建脚本
| |— dev-client.js # 主要用来实现开发阶段的页面自动刷新（热重载）
| |— dev-server.js # 运行本地开发服务器
| |— utils.js # 构建相关工具方法
| |— webpack.base.conf.js # wabpack基础配置
| |— webpack.dev.conf.js # wabpack开发环境配置
| |— webpack.prod.conf.js # wabpack生产环境配置
|— config # 配置目录，包括端口号等
| |— dev.env.js # 开发环境变量
| |— index.js # 项目配置文件
| |— prod.env.js # 生产环境变量
| |— test.env.js # 测试环境变量
|— node_modules # npm||cnpm install 安装的依赖代码库
|— src # 存放项目源码
| |— assets # 放置一些图片,如logo等
| |— components # 目录里面存放一些公共组件
| |— App.vue # 根组件
| |— main.js # 入口js文件
|— static # 存放静态资源(图片、字体等),不会被wabpack构建
| |— .gitkeep # 当static目录为空文件夹时git也可以提交到代码仓库
|— test # 测试文件目录
|— .babelrc # babe文件的编译配置
| |— presets # 预设转码规则
| |— plugins # 除了预设的,还可以根据自己的需求添加其他转码插件
| |— comments # 转换后代码生不生成注释
|— .editorconfig # 编辑器的配置
| |— charset # 编码
| |— indent_style # 缩进风格
| |— indent_size # 缩进长度
| |— end_of_line # 换行风格
| |— insert_final_newline # 创建一个文件是否自动在文件末尾插入一个新行
| |— trim_trailing_whitespace # 移除文件末尾多余的空行
|— .eslintignore # 忽略语法检查的目录文件
|— .eslintrc.js # eslint的配置文件
|— index.html # 入口页面
|— package.json # npm包配置文件
|— favicon.ico # 网站图标

• 本地开发测试运行的命令是 npm run dev
• 打包发布的命令是 npm run build生成的dist文件夹里的文件就是我们可以布置到服务上的文件
• 但是呢，这打包好的文件的文件地址都是/根目录的，如果我们需要更改这个默认的更目录路径，需要在config文件夹里的index.js里的assetsPublicPath: '/',修改目录就行了，这里它默认的就是根目录。