- 升级webpack4之后，插件 由 extract-text-webpack-plugin 变为 mini-css-extract-plugin 。
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
//通常路径表现为 ./static/img/static/img/*.jpg （定义为imgurl）
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //注意: 此处根据路径, 自动更改 ，（imgurl='static/img/*.jpg'）
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../../'
}
}].concat(loaders)
} else {
return ['vue-style-loader'].concat(loaders)
}
}
- 同时运行多个命令，使用 concurrently 工具包
https://www.npmjs.com/package/concurrently 具体属性可以参照这里。
scripts脚本如下：test就是执行两句命令的。
"mock": "nodemon mocks/server.js",
"dev": "webpack-dev-server --mode=development --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"test": "concurrently -r \"npm run dev\" \"npm run mock\" ",
- 页面表格数据由Excel导入
<div>
<el-button type="primary" class="btn-out-effect" @click="upload()">上传文件</el-button>
<input v-show="false" type="file" @change="importExcel()" ref="inputer" multiple accept=".xls, .xlsx"/>
<span>示例</span>
</div>
使用这个xlsx工具包
https://www.npmjs.com/package/xlsx
import XLSX from "xlsx";
upload() {
this.$refs.inputer.value = '';
const inputer= this.$refs.inputer.click();
}
//开始导入
importExcel(e) {
const obj = this.$refs.inputer;
let _this=this;
// 通过DOM取文件数据
if(!obj.files) {
return;
}
const f = obj.files[0];
let reader = new FileReader();
reader.onload = function(e) {
let data = e.target.result;
if(this.rABS) {
this.wb = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
this.wb = XLSX.read(data, {
type: 'binary'
});
}
/**
* wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
* wb.Sheets[Sheet名]获取第一个Sheet的数据
*/
let excelJson = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]]);
_this.tableData=excelJson;
};
if(this.rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
},
//文件流转BinaryString
fixdata(data) {
let o = "",
l = 0,
w = 10240;
for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w +
w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
- 高德地图异步引入方法
export default function mapLoader(key, plugins) {
const p1 = new Promise(function(resolve, reject) {
window.init = function() {
resolve(AMap)
};
let script = document.createElement("script");
script.type = "text/javascript";
script.src = `//webapi.amap.com/maps?v=1.4.15&key=${key}&plugin=${plugins}&callback=init`;
script.onerror = reject;
document.head.appendChild(script);
});
const p2 = new Promise(function(resolve, reject) {
let script2 = document.createElement("script");
script2.type = "text/javascript";
script2.src = "//webapi.amap.com/ui/1.0/main-async.js";
script2.onerror = reject;
script2.onload = function(su) {
resolve('success')
};
document.head.appendChild(script2);
});
return Promise.all([p1, p2])
.then(function(result) {
return result[0]
}).catch(e => {
console.log(e);
})
};
在生命周期create 中调用方法：
created() {
mapLoader(this.key, this.plugins)
.then(AMap => {
console.log("MP加载。。then。。。", AMap);
initAMapUI(); //这里调用initAMapUI初始化
this.loaderMap(); //加载地图
})
.catch(err => {
this.loading = false;
this.$message({
message: "地图加载失败" + err,
type: "error",
duration: 3000
});
console.log("MP加载。。err。。。", err);
});
}
-
使用axios遇到的问题
a. post的时候，使用query传值，会出现问题。
postman截图：
图片.png
postman可以正常访问接口。
经查证官方说明： https://www.npmjs.com/package/axios
axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。这就与服务端要求的 'Content-Type': 'application/x-www-form-urlencoded' 以及 @RequestParam 不符合。
所以需要转格式。
封装的ajax.js文件
function ajax(method, args, ori) {
args = Array.prototype.slice.call(args, 0);
let url = args[0];
let lc = url.indexOf('?') > 0 ? '&' : '?';
args[0] = url + lc + '__ts=' + (new Date().getTime());
return new Promise((resolve, reject) => {
axios[method].apply(axios, args).then(function(response) {
if (ori !== true) {
if (response.data.message === "success") {
resolve(response.data.data);
} else {
// console.log(response, '[fail]: ' + JSON.stringify(response.data), response.data.code);
resolve(response.data);
}
} else resolve(response);
}).catch((thrown) => {
console.error('[error]', thrown, '从服务器获取数据发生错误！');
reject(thrown);
});
});
}
export default {
get: function() {
return ajax('get', arguments);
},
post: function() {
return ajax('post', arguments);
},
put: function() {
return ajax('put', arguments);
},
delete: function() {
return ajax('delete', arguments);
},
getOri: function() {
return ajax('get', arguments, true);
},
postOri: function() {
return ajax('post', arguments, true);
},
putOri: function() {
return ajax('put', arguments, true);
},
deleteOri: function() {
return ajax('delete', arguments, true);
}
}
调用使用：
ajax.post('/xxx/list', Qs.stringify(data), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
Qs是axios库自带的。
第二种：使用 URLSearchParams
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
这个不是所有的浏览器都支持URLSearchParams。具体可以在 https://www.caniuse.com/#feat=urlsearchparams
这里查看。
第三种 ：后端接口修改
服务端接收参数用的是 @RequestParam（通过字符串中解析出参数）
修改成这个 @RequestBody（从请求体中获取参数）
这样就能正常的接收json格式。
6.换行符分隔符
str.split(/\r?\n/) //使用正则表达式进行分隔
- 关于vue遇到错误问题。
a. 第一步，删除node_modules文件夹，从新npm install 或者 yarn install。
b. 有可能在windows出现编译错误，通常是node-sass错误，获得是 node-gym。因为windows平台会出现缺少编译环境错误。
1、先运行： npm install -g node-gyp
2、然后运行：运行 npm install --global --production windows-build-tools
可以自动安装跨平台的编译器：gym
具体命令如下：
npm install -g node-gyp
npm install --global --production windows-build-tools
c. 出现下载依赖缓慢的情况，可以将依赖包源头切换到淘宝镜像源
查看 npm 配置 npm config list
c1. 将 npm 源切换至淘宝源
npm config set registry https://registry.npm.taobao.org
c2. 通过 npm 全局安装 yarn
npm install -g yarn
如果执行 yarn 命令遇到报错，请将 npm bin -g 所得的路径添加至 PATH 环境变量中。
查看 yarn 配置 yarn config list
c1. 将 yarn 源切换至淘宝源
yarn config set registry https://registry.npm.taobao.org
c2. 执行 yarn install 或者 yarn
具体命令如下：
npm config set registry https://registry.npm.taobao.org
或者
yarn config set registry https://registry.npm.taobao.org
网友评论