VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服务端渲染. 1.概述 官方文档 服务端渲染的配置相比预渲染就复杂多了,要做到同构,还要保证服务端和客服端的组件状态一致,我们需要对整个项目进行改造.大部分的内容官方文档中都说明的比较清楚,这里就不重复讲述了,需要各位花费一些时间照着文档一步步改造项目. 本人一开始也是这样照着文档做的,但是改造到最后…

有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import Vue from 'vue' import util from './util/Util' Vue.prototype.$util = util 之后就可以在组件中通过this.$util来调用了. 简单方便,为了避免忘记,特此记录一下.哈哈~…

1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 6.10.3 的版本,相对稳定.     2.使用 npm 管理依赖 使用 node 自带的包管理工具 npm 管理项目中的依赖,由于 npm 的服务器在国外.经常会遇到速度奇慢或者下载不下来依赖的情况,所以推荐使用淘宝镜像. npm install-g cnpm--registry=https:/…

前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 git init 将项目所有文件(未被ignore)添加到仓库 git add . 将add文件提交到本地仓库 git commit -m ‘提交信息’ 本地仓库关联远程git仓库 git remote add origin git仓库 本地仓库代码提交到服务器 git push -u origi…

assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:…

中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, actions…

目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本可能会报错 cnpm i compression-webpack-plugin@1.1.11 -D 更改配置文件 开启生产环境gzip功能. /config/index.js: productionGzip: true, /build/webpack.prod.config.js: webpackC…

https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: "url("../../assets/img/bac.jpg")"…

@vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack 和 webpack-dev-server 之上 安装   如果已安装旧版 需要先卸载旧版本 : npm uninstall vue-cli -g //or yarn global remove vue-cli 任一命令安装全局新包: npm install -g @vue/cli //or yar…

本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set registry https://registry.npm.taobao.orgcnpm config set registry https://registry.npm.taobao.orgyarn config set registry https://registry.npm.taobao.org配…