前端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
网友评论