长情

nuxt.js 点击页面跳转跨域 使用nuxt.js做SSR有一个特点，就是在第一次打开页面的时候，不会存在跨域的问题。但是页面跳转的时候，就会出现跨域的问题了。 问题——页面跳转会产生跨域问题 由于公司要开发一个SSR的PC端项目，前几天选择使用nuxt.js搭建了一个项目，做了国际化，拦截等等。然后交给其他同时去开发了。今天同时突然问我，这是产生跨域了吧！但是代理配置了啊，为什么会产生跨域啊，让我帮他解决一下。我看了看之前写的代理，貌似没有什么问题，但就是产生跨域，这是为什么呢？代理也成功了，也运行了啊，为了解决这个问题感觉应该是只代理了接口，没有代理文件，由于是服务端渲染，而没有代理文件，页面跳转的时候拿文件的过程中就会出现跨域（感觉应该是这个问题） 解决——使用@gauseen/nuxt-proxy做代理一、安装 @gauseen/nuxt-proxy 依赖资源123npm install --save-dev @gauseen/nuxt-proxyORyarn add --save-dev @gauseen/nuxt-proxy 二、配置1234567891011121 ...

前言 ​ 由于本人的能力有限，如若有说得做的不对的地方，还望指出。当然，如若你有更好的方法，或者更优解，还望不吝赐教。 1、需求 根据需求，现在需要做一个服务端渲染的PC网站。SSR 技术选型：Vue Vue-i18n Nuxt.js elementUI 2、对于Vue-i8n在Nuxt.js中的使用 首先说一下，nuxt.js和我们之前做的SPA单页面应用不一样，做国际化也不一样，之前已经写过在SPA中如何使用国际化，现在再写一下在SSR中如何使用国际化 3、安装vue-i18n12npm install vue-i18n --saveyarn add vue-i18n --save 4、在nuxt中引入vue-i18n 在plugins文件夹下创建一个i18n.js文件，并写入如下代码 1234567891011121314151617181920212223import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)export default ...

前言 ​ 由于本人的能力有限，如若有说得做的不对的地方，还望指出。当然，如若你有更好的方法，或者更优解，还望不吝赐教。 需求 ​ 实时监听app的联网状态，在断开网络的时候，提示用户网络断开了 自己的想法 ​ 监听用户的网络链接状态，如果断网，显示断网的页面。 实现在app.vue文件中添加一个属性来监控网络是否是开启状态 12345data() { return { network: true, //默认有网 }; }, 在app.vue 的mounted生命钩子函数里注册检测网络链接的状态 1234567891011mounted() { // 检测断网 window.addEventListener("offline", () => { console.log("已断网"); this.network = false; }); window.addEventListener("onl ...

前言 终于，迎来第一本苹果电脑，现在需要把很多东西移动到mac本上。下面是记录迁移博客的一些记录。 1.目前了解的是有两种方法进行迁移1.1 粘贴复制的方法 把所有的资源都粘贴到mac本上(安装的包除外) sudo yarn install / npm i 安装依赖 sudo npm i hexo-cli -g / sudo yarn add hero-cli -g 全局安装 hero-cli sudo hexo new xxx sudo hexo clean sudo hexo g sudo hexo d 1.2 在windows上把所有的资源上传到博客的一个新的分支上 在本地创建新的分支 把包以外的资源上传的此分支上 在mac上使用git clone 地址 把资源克隆到本地 然后再重复1.1上面的命令就ok了 2.遇到的坑 由于在装node.js的时候没有注意，把node装成了测试版本，由于版本太高，造成运行hexo的时候报错 一些变量找不到 解决办法：把node版本降级到稳定版本就好了。可以使用。 n 进行降级。 n是node的简写。 是管理node的版本的一个工 ...

前端工程化开发时的跨域解决方案 此方案只能用于开发环境，线上最好设置同源策略 1. 场景前后端分离的项目 前后端不在同一服务器的情况下，前端要访问后端API，可通过在vue.config.js中配置代理服务器 2. 配置2.1 前提条件1：安装vue-lic 2：安装axios 用于发送请求 2.2 配置axios详细配置 请查看axios 2.3 开始发送请求此时控制台会报跨域错误 ， 这个时候 就需要设置跨域了，或者后台配置允许跨域（一般都不这么干） 2.4 前端配置跨域 先在根目录创建vue.config.js 写入以下代码 1234567891011121314 //vue-cli3.0 里面的 vue.config.js做配置devServer: { proxy: { '/api': { //这里最好有一个 / target: 'http://xx.xx.xx.xx:8080', // 后台接口域名 ws: true, ...

前言 ​ 由于本人的能力有限，如若有说得做的不对的地方，还望指出。当然，如若你有更好的方法，或者更优解，还望不吝赐教。 1、什么是gitalk？ Gitalk 利用了 GithubAPI 基于 GitHub Issue 和 Preact 开发的评论插件，官方网址： https://gitalk.github.io 特点： 使用 GitHub 登录 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru] 支持个人或组织 无干扰模式（设置 distractionFreeMode 为 true 开启） 快捷键提交评论 2、配置gitalk 注册：要使用 Gitalk 需要先在 GitHub 上注册新应用，链接：https : //github.com/settings/applications/new 2. 点击注册后，会生成Client ID和Client Secret在配置中需要用到，也是应用访问你 Github 的凭证，具体配置如下： 12345678910comment: gitalk: enable: true ## If you ...

1 数据渲染 template 1234567891011121314<van-list v-for="items in tabbar" :key="items.id" v-show="items.isActive" v-model="items.loading" :finished="items.finished" finished-text="没有更多了" @load="onLoad(items)" ref="listItem"> <van-cell v-for="item in items.list" :key="item" :title="item">{{ items.value }}</van-cell></van-list> data 1234 ...

前言 由于个人比较喜欢使用yarn，所以根据自己的经验以及查阅资料，总结一下常用的命令。 安装1npm i -g yarn 查看版本123yarn -vyarn -version注意：yarn -version（查看yarn的版本） 与 yarn version（当前项目的版本） 不同！ 创建项目1234// 通过交互式会话创建一个 package.jsonyarn init// 默认值生成 package.jsonyarn init --yes 添加依赖12345// 默认会添加到生产环境 dependencies --save 是默认的yarn add <package_name>// --dev 会添加到开发环境 devDependenciesyarn add <package_name> --dev 添加全局依赖1yarn global add <package_name> 更新依赖1yarn upgrade 移除依赖1yarn remove <package_name> 安装所有依赖1234// -- ...

vue-router 路由传参方式 1 路由组件传参 1.1 布尔模式 1.1.1 配置路由 添加 props: true 选项 { // 我的地址列表 name: "addressedit", path: "/account/addressedit", props: true, component: () => import("@/views/addressEdit"), }, 1.1.2 传递参数 在传参的过程中 写上 props: true, 说明开启了路由组件传参 onEditAddress(item, index) { this.$router.push({ name: "addressedit", params: { id: index }, props: true, }); this.$toast("编辑地址:" + ...

在vue项目中使用vue-i18n 实现国际化 在很多项目的开发中都需要设置国际化 我也是在最近的一个项目中使用到了国际化，所以总结一下 1. 安装vue-i18n1yarn add vue-i18n 2. 在根目录中创建lang文件夹 en_us.js 1234567891011121314151617181920212223242526272829export default { footer: ["home", "catgory", "cart", "account", "not login"], header: {}, index: { rowTime: { title: "xxx", }, recommend: "xxx", }, userPageText: { WishList: "xxxx" ...