vue3.0项目搭建:
一、环境配置
1、在根目录下新建一个开发环境文件(.env.development)和一个生产环境文件(.env.production)
.env.development
NODE_ENV = 'development'
//必须以VUE_APP_开头
VUE_APP_ENV = 'development'
====================================
.env.production
NODE_ENV ='production'
//必须以VUE_APP_开头
VUE_APP_ENV = 'production'
2、在src目录下新建一个config文件夹,下面建三个文件,分别是:index.js、env.development.js、env.production.js
index.js
const config = require('./env.'+ process.env.VUE_APP_ENV)
module.exports = config
==============================================================
env.development.js
module.exports = {
title:'本地环境',
baseApi:'http://www.xxx.com'
}
=======================================
env.production.js
module.exports = {
title:'生产环境',
baseApi:'http://www.xxx.com'
}
=======================================
3、此时我们可以根椐npm run dev 和 npm run build 分别可以拿到测试和生产的接口域名,所以统一封装
请求axios请求接口。
在src目录下新建一个util文件夹,下面新建一个request.js文件
request.js
import axios from 'axios'
import {baseApi} from './../config'
const service = axios.create({
baseURL: baseApi,
withCredentials: false,
timeout: 5000
})
// request拦截器 request interceptor
service.interceptors.request.use(config => {
console.log('config',config)
return config
},error => {
console.log(error);
return Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(response => {
const res = response.data
if(res.status && res.status !== 200) {
return Promise.reject(res)
} else {
return Promise.resolve(res)
}
},error =>{
return Promise.reject(error)
})
export default service
==================================================
4、在util目录下新建http.js,这里统一封装一下请求:
import request from './request.js'
export default{
get(url,method='get'){
request({
url,
method
})
},
post(url,method='post',data){
return request({
url,
method,
data
})
}
}
====================================================
5、在src目录下新建一个api文件夹,在下面建一个home.js,这里统一写请求接口:
import $ from '../util/http'
export const getUser = ()=>{
return $.get('/user')
}
====================================================
6、然后在组件页面中使用:
import {getUser} from './../api/home'
export default{
created(){
getUser().then(res=>{
console.log(res)
})
}
}
=====================================================
二、配置跨域
在根目录下新建一个文件vue.config.js
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
outputDir: 'dist', // 生产环境构建文件的目录
assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false, //eslint 检测
productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
devServer: {
port: 9527, // 端口
open: false, // 启动后打开浏览器
overlay: {
// 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
warnings: false,
errors: true
},
proxy: {
//配置跨域
'/api': {
target: "https://test.xxx.com",
// ws:true,
changOrigin:true,
pathRewrite:{
'^/api':'/'
}
}
}
},
chainWebpack:(config)=>{
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
}
}
===========================================================
// 引入axios
import axios from 'axios';
// 创建axios实例
const httpService = axios.create({
// url前缀-'https://some-domain.com/api/'
baseURL: process.env.BASE_API, // 需自定义
// 请求超时时间
timeout: 3000 // 需自定义
});
// request拦截器
httpService.interceptors.request.use(
config => {
// 根据条件加入token-安全携带
if (true) { // 需自定义
// 让每个请求携带token
config.headers['User-Token'] = '';
}
return config;
},
error => {
// 请求错误处理
Promise.reject(error);
}
)
// respone拦截器
httpService.interceptors.response.use(
response => {
// 统一处理状态
const res = response.data;
if (res.statuscode != 1) { // 需自定义
// 返回异常
return Promise.reject({
status: res.statuscode,
message: res.message
});
} else {
return response.data;
}
},
// 处理处理
error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求';
break;
case 401:
error.message = '未授权,请重新登录';
break;
case 403:
error.message = '拒绝访问';
break;
case 404:
error.message = '请求错误,未找到该资源';
break;
case 405:
error.message = '请求方法未允许';
break;
case 408:
error.message = '请求超时';
break;
case 500:
error.message = '服务器端出错';
break;
case 501:
error.message = '网络未实现';
break;
case 502:
error.message = '网络错误';
break;
case 503:
error.message = '服务不可用';
break;
case 504:
error.message = '网络超时';
break;
case 505:
error.message = 'http版本不支持该请求';
break;
default:
error.message = `未知错误${error.response.status}`;
}
} else {
error.message = "连接到服务器失败";
}
return Promise.reject(error);
}
)
/*网络请求部分*/
/*
* get请求
* url:请求地址
* params:参数
* */
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'get',
params: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* post请求
* url:请求地址
* params:参数
* */
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* 文件上传
* url:请求地址
* params:参数
* */
export function fileUpload(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
export default {
get,
post,
fileUpload
}
=============================================================================
vue cli3中使用postcss-pxtorem进行适配
下载依赖:
npm install postcss-pxtorem -D
新建一个rem.js的文件,在main.js中引用。
// 蓝湖上设计稿自定义为375px 测量值直接写入即可
(function() {
const baseSize = 16; // 32
function setRem() {
const scale = document.documentElement.clientWidth / 375; // 750
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px";
}
window.onresize = function() {
setRem();
};
})();
在根目录下新建一个postcss.config.js
module.exports = {
plugins: {
// 兼容浏览器,添加前缀
autoprefixer: {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8",
"last 10 versions", // 所有主流浏览器最近10版本用
],
grid: true,
},
"postcss-pxtorem": {
rootValue: 16, //结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
propList: ["*"], //是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*']
unitPrecision: 5, //保留rem小数点多少位
//selectorBlackList: ['.radius'], //则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换,这里也支持正则写法。
replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
minPixelValue: 12, //px小于12的不会被转换
},
},
};
// 蓝湖上设计稿自定义为375px 测量值直接写入即可 若设计稿为750px 则rootValue: 32
=======================================================================================
JS计算两个时间戳相差月数、天数、时数、分钟、秒数
function humandate(time1, time2) {
//var time1 = Date.parse(new Date()) / 1000;
var s = time1 - time2;
if (s < 0) {
s = Math.abs(s);
}
if (s > 31536000) {
return formatDate(new Date(time2 * 1000));
} else if (s > 2592000) {
return parseInt(s / 2592000) + '月';
} else if (s > 86400) {
return parseInt(s / 86400) + '天';
} else if (s > 3600) {
return parseInt(s / 3600) + '小时';
} else if (s > 60) {
return parseInt(s / 60) + '分钟';
} else {
return parseInt(s) + '秒';
}
}
exports.humandate = humandate;
引入:
const { humandate } = require('../../utils/humandate.js');
humandate('开始时间戳', '结束时间戳')
vue前端部署docker vue前端部署需要封装么
转载文章标签 vue前端部署docker vue.js 前端 javascript js 文章分类 Docker 云计算