1.vue项目打包上线后提示错误 Uncaught SyntaxError: Unexpected token <
开发环境
- vue-cli3.0
- router开启了history模式
- 打包采取了dll方式优化
问题解决
- 当关闭history模式，重新打包发布，显示OK。但是浏览器路径会加上#号，显得不美观，所以此方式不合适
- 将dll方式打包引入移除，重新打包发布，问题解决。但是违背了优化原则，所以此方法也不合适
- 通过上面2个方法总结发现打包后引入的dll.js文件的路径是相对路径，其他引入的JS文件采取的是绝对路径。将打包后引入dll文件的路径修改成绝对路径。重新打包上传，问题彻底解决。
/**
* 将 dll 注入到 生成的 html 模板中
*/
config.plugins.push(
new AddAssetHtmlPlugin({
// dll文件位置
filepath: path.resolve(__dirname, "./public/vendor/*.js"),
// dll 引用路径
publicPath: "/vendor", (此处未修改之前是./)
// dll最终输出的目录
outputPath: "./vendor"
})
);
2.浅克隆
需求：在做后台顶部导航切换时候，跳转到子页面的时候需要将子页面打开一个新的标签页.
在创建新的标签页的时候，由于某些功能会使用同一页面，例如：新增、修改... 动手之前自己的想法是，跳转到新增会添加一个标签页，跳转到编辑又是一个标签页，每次进入之前会组件路由钩子里面将标签的标题进行修改
/**
* @description 验证子页面的展示权限
*/
export const handleChildrenAuth = (to, next, btnName) => {
const { ownPermission, parentTitle, navList } = to.meta;
try {
const authInfo = JSON.parse(ownPermission);
const res = authInfo.find(e => e.id === btnName);
to.meta.title = parentTitle + "-" + res.text;
console.log(to.meta.title);
navList.push({
name: res.text,
url: to.path
});
next();
} catch (error) {
next("/");
}
};
当创建标签页面的时候会监听路由变化，将route直接存储到展示的数据里面
/**
* @addTagList 添加标签或者关闭一个标签
*/
addTagList(state, { route, type = "unshift" }) {
let data = localRead("tagList");
if (type === "push") {
if (data) {
const result = data.find(item => item.name === route.name);
if (result && result.path === route.path) {
return;
}
if (result) {
const index = state.tagList.findIndex(e => e.name === route.name);
state.tagList.splice(index, 1, route);
} else {
state.tagList.push(JSON.parse(JSON.stringify(route)));
}
}
} else {
const result = data.findIndex(item => item.name === route.name);
if (result > -1) data.splice(result, 1);
state.tagList = data;
}
localSave("tagList", state.tagList);
},
直接将state.tagList.push（route）的话，此时就是一个浅克隆，当你新增的时候修改标签标题的情况下，会将编辑标签的标题同时修改掉
3.使用flex布局，点击页面最小化出现页面计算缓慢情况
解决方案：在设置flex:1 / flex: auto 自适应的元素上设置overflow：hidden;
4.禁止浏览器自动填充账户密码
解决方案：在填充的input标签添加属性 autocomplete=“new-password”
