module

配合 @vue/cli 3.0 通过插件快速生成模块化(子应用)项目模版.

目录

• 脚本
• 结构
• 特性

脚本

本地开发

$ npm run serve

构建打包

• 模块化构建打包

$ npm run module

• 普通模式构建打包

$ npm run build

配合云效的相关脚本

• 加入新的环境变量

$ npm run build -- --app_env='{"DNS_CODE": "test"}'

• 使用环境变量

// 网关 api 后缀根据 DNS_CODE 的值在编译时进行修改
const FORMAT_API_CODE = (s) => {
  const suffix = isDev ? '_test' : `_${`${process.env.DNS_CODE}` || 'pro'}`
  return `${s}${suffix}`
}

• 生成nginx.conf配置文件

$ npm run build -- --port=8181 --root=/home/8181/mnt/dist

• 配置文件效果

server {

   listen   8181;

   #证书文件
   #ssl_certificate     /home/8181/mnt/dist/server.pem;
   #私钥文件
   #ssl_certificate_key /home/8181/mnt/dist/server.pem;
   #ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
   #ssl_ciphers         HIGH:!aNULL:!MD5;

   root /home/8181/mnt/dist;

   location / {
      try_files $uri @fallback;
   }
   location @fallback {
      rewrite .* /index.html break;
   }

   location /api/ {
      proxy_read_timeout 300; # Some requests take more than 30 seconds.
      proxy_connect_timeout 300; # Some requests take more than 30 seconds.
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_set_header   Host              $host;
      proxy_set_header   X-Real-IP         $remote_addr;
      proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
      proxy_set_header   X-Forwarded-Ssl   on;
      proxy_set_header   X-Frame-Options   SAMEORIGIN;

      proxy_pass http://192.168.110.187:17000/api/;
   }

   index index.html index.htm index.cgi index.php index.php5;
}
  

nginx.conf中相关代理的配置与 dev service里proxy的配置保持一致。

结构

   +-- public -------------------------------------------> 公用文件
   |
   +-- src ----------------------------------------------> 源码目录
   |   +-- assets ---------------------------------------> 全局资源目录
   |   |   +-- css --------------------------------------> 样式资源文件
   |   |   +-- img --------------------------------------> 图片资源文件
   |   |   +-- font -------------------------------------> 全局字体库
   |   |   +-- json -------------------------------------> 静态json文件
   |   |
   |   +-- components -----------------------------------> 全局组件目录
   |   |   +-- App --------------------------------------> App 组件目录 双驼峰
   |   |   |   +-- index.vue ----------------------------> 组件主入口
   |   |   |   +-- cell ---------------------------------> 组件下子组件文件夹
   |   |   +-- Other Component
   |   |   +-- index.js ---------------------------------> 全局注册入口
   |   |
   |   +-- directives -----------------------------------> 全局指令目录
   |   |   +-- resize-dom -------------------------------> 指令目录 命名采用连字符
   |   |   |   +-- index.js -----------------------------> 组件主入口
   |   |   +-- Other Directive
   |   |   +-- index.js ---------------------------------> 全局注册入口
   |   |
   |   +-- lib ------------------------------------------> 第三方库资源文件
   |   |
   |   +-- utils ----------------------------------------> 工具目录
   |   |   +-- index.js ---------------------------------> 注册入口
   |   |
   |   +-- router ---------------------------------------> 路由配置
   |   |
   |   +-- store ----------------------------------------> vuex配置
   |   |   +-- globe ------------------------------------> 持久化缓存的全局状态目录
   |   |   |   +-- modules ------------------------------> globe/[module] 状态模块
   |   |   |   +-- index.js -----------------------------> globe 入口文件
   |   |   +-- common -----------------------------------> 全局状态目录
   |   |   |   +-- modules ------------------------------> common/[module] 状态模块
   |   |   |   +-- index.js -----------------------------> common 入口文件
   |   |   +-- index.js ---------------------------------> store 入口文件
   |   |
   |   +-- views ----------------------------------------> 视图目录
   |   |   +-- tpl --------------------------------------> tpl模块
   |   |   |   +-- views --------------------------------> tpl下的视图文件
   |   |   |   |   +-- children -------------------------> tpl下的子路由
   |   |   |   |       +-- home -------------------------> /tpl/home 目录
   |   |   |   |           +-- components ---------------> /tpl/hone 下的组件目录
   |   |   |   |           |   +-- list -----------------> /tpl/home 下的 list 复杂组件
   |   |   |   |           |   |   +-- index.vue --------> /tpl/home 下的 list 复杂组件入口
   |   |   |   |           |   |   +-- cell -------------> /tpl/home 下的 list 复杂组件生成的 子组件目录
   |   |   |   |           |   |
   |   |   |   |           |   +-- list-item.vue --------> /tpl/home 下的 list-item 简单组件
   |   |   |   |           |
   |   |   |   |           +-- index.vue ----------------> /tpl/hone 下的视图文件
   |   |   |   |           +-- store.js -----------------> /tpl/home 页面使用到的 store
   |   |   |   |
   |   |   |   +-- components ---------------------------> tpl模块下公用的组件目录
   |   |   |   +-- router.js ----------------------------> tpl模块的路由配置
   |   |   |   +-- store.js -----------------------------> tpl的状态管理配置
   |   |   |   +-- index.js -----------------------------> tpl的注册入口
   |   |   |
   |   |   +-- index.js ---------------------------------> 视图统一组册入口
   |   |
   |   +-- app.js ---------------------------------------> app Vue实例生成，各全局组件/指令/函数注册
   |   +-- main.js --------------------------------------> 项目主入口
   |   +-- module.js ------------------------------------> 模块化模式的项目主入口
   |   +-- normalize.js ---------------------------------> 项目适配，主要实现各种 polyfill
   |   +-- pwa.js ---------------------------------------> pwa相关配置
   |
   +-- babel.config.js ----------------------------------> babel相关配置
   +-- vue.config.js ------------------------------------> vue cli 相关配置
   +-- .gitignore ---------------------------------------> git ignore 配置
   +-- package.json -------------------------------------> 项目信息/版本/npm脚本/依赖/eslint配置/postcss配置/游览器适配配置
   +-- README.md ----------------------------------------> 说明文档