前端vue-cli4.0多页架构说明

前端vue-cli4.0多页架构说明

[[toc]]

---

## 技术点：
Vue  
sass  
webpack 
vue-cli  
axios  
ivew组件库 
vueq全家桶
node 
es6

一、目录说明

├── README.md      脚手架说明
├── babel.config.js  语法转译器
├── node_modules    依赖包管理
├── dist    打包文件
│   ├── css
│   │   ├── chunk-08007e70.25360863.css
│   ├── favicon.ico
│   ├── fonts
│   ├── img
│   │   ├── big_equip.2d697ea1.png
│   ├── index.html
│   ├── js
│   │   ├── chunk-08007e70.925ccfa8.js
│   └── media
│       └── water.7bcb5140.mp3
├── package.json      依赖包配置目录
├── public                多页html源文件
│   ├── favicon.ico
│   └── index.html
├── server.js      打包文件测试脚本
├── src
│   ├── api        api接口列表存放
│   │   └── apiBase.js
│   ├── assets    静态文件存放
│   │   ├── audio
│   │   ├── images  图片
│   │   ├── js         插件
│   │   └── scss     全局scss
│   ├── entries        模版入口文件
│   │   └── index
│   │       ├── App.vue   初始模板
│   │       ├── http.js     http请求拦截器
│   │       ├── main.js    主脚本文件
│   │       ├── router.js   导航路由
│   │       ├── views      vue模版文件
│   │       │   ├── back
│   │       └── vuex   数据管理仓库
│   │           └── store.js
│   └── mock.js   接口数据mock
├── vue.config.js    配置文件
└── yarn.lock

二、骨架要点

1，mian.js配置

应用的主入口文件脚本、全局配置公共方法、全家桶文件配置、vue主模版引入配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './vuex/store'
import 'view-design/dist/styles/iview.css'
import '../../assets/scss/common.scss'
import http   from './http.js';
import api     from '../../api/apiBase.js'
import VueLazyLoad from 'vue-lazyload'     //图片懒加载
//引入mock.js的路径
require('../../mock.js');  
Vue.use(VCharts);
/**
 * 全局配置common方法
 */
Object.assign(Vue.prototype,{
    http,         //ajax封装的请求
    api,          //接口地址全局封装
    cookie,        //cookie
});
 /**
  * 懒加载使用
  */
Vue.use(VueLazyLoad,{
    error:'', //加载失败的图
    loading:'' //加载中的默认图
});
Vue.config.productionTip = false
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#index');

2，接口路径全局配置（api.js）

注意：后端写给前端的接口加关键词
例如：http://192.12.6.12:6000/api/xxx, api就是约定关键词

export default {
    /**
     * 登录模块接口
     */
    login: '/api/login/',                //登录
    logout: '/api/logout/',               //登出
}

3, 接口请求

请求使用基于ajax 封装的 axios插件

getXXX: async function() {
    let vm = this;
    let params = {
        //请求参数
    }
    const res = await vm.http.get(‘接口地址’,params);
    if(!res){
        return
    }
    let result = res.data;
    if( res  && result.code === 200){
          //成功处理逻辑
    }
},

4，http请求拦截器配置

1,前端向服务端发起请求,验证是否存在token,在请求头部发送token headers.Authorization = Token ${token},后端拦截器拿到token,判断登录状态是否失效，失效则返回状态code码提示前端，前端做路由登录，反之则请求成功，code码 100，200、或0都可以！
2,对后端抛出的异常都会在这里集中处理
3,请求分为get和post两种方式
截取拦截器部分代码

/**
 * http请求拦截器
 */
const token = cookie.get('shache_token');
axios.interceptors.request.use(config => {
    if (token) {  // 判断是否存在token，如果存在的话，则每个http请求的header都加上token,username
        config.headers.Authorization = `Token ${token}`;
    }
    return config
}, error => {
    return Promise.reject(error)
});

axios.interceptors.response.use(response => {
    return response
}, error => {
    // vm.$message.error(error);
    Message.error('接口异常！');
});

5，接口代理配置（vue.config.js）

后端部署好服务之后，给前端说明服务地址和端口，前端配置代理服务，前后端就可以联调

devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 9998,
    https: false,
    hotOnly: false,
    proxy: {
        '/api/*': {
            target: 'http://xxxx:4068/',
            changeOrigin: true,
            secure: false
        },
    }, // 设置代理
    before: app => { }
},

三、前端nginx部署配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       8055;
        listen       14430 ssl;
        server_name  yanqing.nxycsw.cn;

        ssl_certificate      D:/workspace/human_drink_yanqing/nginx-1.16.1/cert/ssl.pem;
        ssl_certificate_key  D:/workspace/human_drink_yanqing/nginx-1.16.1/cert/ssl.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
        #server_name  yanqing.nxycsw.cn;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        
        location / {
            root   D:/workspace/human_drink_yanqing/nginx-1.16.1/html/docs/dist;    //服务器前端dist文件地址
            index  index.html index.htm after.html front.html mobile.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
           # rewrite  ^.+api/?(.*)$ /$1 break;
           include  uwsgi_params;
           proxy_pass   http://127.0.0.1:8056/api; #此处修改为自己的请求地址
           allow all;
           autoindex_exact_size on;
           autoindex_localtime on;
           proxy_buffering off;
        
        }
    }
}

四，前端项目启动说明

1,安装依赖：yarn
2,启动本地热加载服务：yarn serve
3,打包文件资源：yarn build
4,本地dist文件测试：node server.js

五、代码规范和测试脚本

1，代码规范：https://www.jianshu.com/p/8e4687756814
2，前端打包文件测试：https://www.jianshu.com/p/85293d616c1c
3，多页配置文件说明：https://www.jianshu.com/p/e4bf2ee60d77