vue新建项目(四)项目部署

项目预览地址

http://manage.hgdqdev.cn/。这里我已经写了一些页面。

项目目录

github:  https://github.com/zhuming3834/manage

本地开发

// 开启服务器，浏览器访问 http://localhost:8080
npm run dev

构建生产

// 执行构建命令，生成的dist文件夹放在服务器下即可访问
npm run build

## 目录结构介绍 ##

    |-- build                            // webpack配置文件
    |-- config                           // 项目打包路径
        |-- index.js                     // 第26行 修改端口号
    |-- dist                             // 打包后的静态文件
        |-- index.html                   // 部署用的静态文件
        |-- static                       // 静态资源目录
    |-- src                              // 源码目录
    |   |-- components                   // 组件
    |       |-- common                   // 公共组件
    |           |-- Home.vue             // 公共路由入口
    |           |-- Sidebar.vue          // 公共左边栏
    |       |-- page                     // 主要路由页面
    |           |-- Carousel.vue         // 轮播图
    |           |-- Checkbox.vue          // checkbox
    |           |-- ECharts.vue           // ECharts
    |           |-- Login.vue            // 登录
    |           |-- Input.vue            // 表单
    |           |-- Qrcode.vue           // 二维码
    |           |-- Radio.vue            // 表单
    |           |-- Select.vue           // 表单
    |           |-- Table1.vue           //表格1
    |           |-- Table2.vue           // 表格2
    |           |-- Table3.vue           // 表格3
    |   |-- App.vue                      // 页面入口文件
    |   |-- main.js                      // 程序入口文件，加载各种公共组件
    |-- .babelrc                         // ES6语法编译配置
    |-- .editorconfig                    // 代码编写规格
    |-- .gitignore                       // 忽略的文件
    |-- index.html                       // 入口html文件
    |-- package.json                     // 项目及工具的依赖配置文件
    |-- README.md                        // 说明

服务器部署

我的服务器是windows server + IIS。
在上面执行npm run build 就生成了一个dist的目录，这个就是项目打包后的目录，部署也是这个目录。
1.修改dist目录共享方式为Everyone可读取。

2.IIS管理器中添加网站

3.配置网站地址，前提是你有域名

4.浏览器查看
完成上面3步后，看就可以在浏览器查看了。
。
http://manage.hgdqdev.cn/。

项目github地址

下载请点击我。