Tongyao

【代码】Vue3 配置 vue-meta-info（SEO优化）

关于我为什么一上来就要说这句话！这个事还得从很久很久以前说起。那天我看到一只鸡穿着背带裤打着… 呸。。。不好意思，说错了。这事还是因为某天，我使用Vue3的版本做了个小商场网站。后来上线后，才发现没有被baidu收录！这意味着，没有收录后，用户就不能从百度搜到我的网站。后来查到vue有个预渲染这个插件，就是后来在网山查找了大量文章，都是vue2的，用不了我的vue3，甚至还有的标题写着的，打开内容是vue2的文章，真实太可气了！！有的还需要fq去下载谷歌的无头浏览器headless。

重新安装node解决，这并没有解决我的问题，舍弃。于是，使用如下第3种方案解决了我的问题。这种方式也没有解决我的问题。

（1）main.js创建自定义指令。（2）vue页面中使用。

NProgress . start() // 开始 NProgress . set(0.4) // 设置进度，0-1 NProgress . inc() // 让进度条增加 NProgress . done() // 完成1、百分比：通过设置 progress 的百分比，调用set(n)来控制进度，其中 n 的取值范围为 0-1。2、递增：要让进度条增加，只要调用inc()。这会产生一个随机增量，但不会让进度条达到 100%。此函数适用于图片加载或其他类似的文件加载。

然后官方给出的默认例子是编辑器，但是我们这边作为一个展现数据的页面，并不需要编辑功能，所以我们需要在main.js/main.ts中做一些更改。这个框架打开看到则是最舒服的一个，上来不仅有个线上demo，还有中文文档，好评。好评👍，但是看了下live demo，个人不是很喜欢这个风格，就列入备选框架中，然后接着看下一个。这个框架单单看首页支持的东西比较全，但是上个版本在四年前，我怕它不支持vue3，所以也没有试用。搜索markdown首先出来的就是这个，然后打开看了下webpack2+，个人就没有去试用。.

代码】Vue 在同一个页面里在不同的router-view里展示页面信息。

在src目录下创建store目录，新建index.js文件，并且在main.js中引入全局store引用。

创建创建根目录utils文件夹，并且创建request.js文件vue中使用具体参考文章：https://blog.youkuaiyun.com/weixin_46443403/article/details/124465888

在使用axios或vue-axios时我们基本都会需要配置axios的拦截器，对axios的请求、响应进行二次封装，会多一道工作。在vue项目当中，可以使用。使用Vue的插件写法，更符合Vue整体生态环境。而直接写原型链，感觉有些粗暴了，除非是很底层的实现，否则不太推荐这样写了。因此，我们更推荐使用。使用的时候不能像vue的插件（如Vue-Router、VueX等）通过。是基于promise的HTTP库，可以使用在浏览器和。插件的方式，不太推荐是直接使用。中，它不是vue的第三方插件。...........

在src下新建router文件夹，并创建index.js文件写入下面配置。并创建好相关文件，启动测试是否可用。

二、导致此错误的原因是，PowerShell执行策略，默认设置为Restricted不加载配置文件或运行脚本。1.yarn无法加载文件C\Users[UserName]\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。更改PowerShell执行策略，过程中提示询问是否要更改执行策略?，选择A或Y。1.运行WindowsPowerShell（管理员），执行命令。命令，可查看当前PowerShell执行策略类型。命令，可正常加载执行脚本。...............

我是在npm install的时候出现的这个问题，开始是安装不上，提示升级npm，然后我按要求升级npm i npm 依然报错解决方法：1`.2. 删除本地node_modules 依赖包3. 执行 npm cache clean --force 清理缓存4. npm install完成作者：spxs339链接：https://www.jianshu.com/p/109acc26abbd来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。.........

vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确， 然后再试一次。报错原因：没有安装脚手架vue-cli解决方法：安装脚手架vue-clinpm install vue-cli -g......

报错信息：无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统中禁止执行脚本原因分析：禁止执行脚本，那就打开权限执行脚本嘛解决方案：打开 powerShell 用管理员身份运行输入命令： set-ExecutionPolicy RemoteSigned输入A再输入 vue -V (搞定)原文地址：http://yaoyaoman.cn/blog/archives/190......

npm install --save @arcgis/core报错：源文本中存在无法识别的标记。所在位置 行:1 字符: 24+ npm install --save <<<< @arcgis/core + CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException + FullyQualifiedErrorId : UnrecognizedToken解

在C:\Users\Administrator\AppData\Roaming\npm\目录下删除所有文件 即可原文地址：http://yaoyaoman.cn/blog/archives/192

报错内容Vue Error: The template root requires exactly one element.详见下图：VSCode 中报错信息Node中报错信息报错原因Vue只允许模板里存在一个根节点。解决方案在 <template> 中添加一个 <div>标签，之后所有的组件全部加在 <div>即可解决。原文地址：http://yaoyaoman.cn/blog/archives/193......

在项目运行中会出现如下图所示的问题，出现Failed to resolve loader: stylus-loade 问题原因，是因为在项目中使用了lang=“stylus”, 项目中并没有安装stylus-loade和stytus ， 安装即可。执行代码如下：npm i stylus stylus-loader --save-dev原文地址： http://yaoyaoman.cn/blog/archives/210...............

解决方案根目录下新建 vue.config.js添加以下代码到vue.config.js文件下 （禁用主机检查）module.exports = { devServer: { //禁用主机检测 防止内网穿透访问失败 disableHostCheck: true }}重启服务OK 解决............

代码】Vueaxios语法和详细使用。

对应的命令后面 添加 ` --mode dev`用来区分使用哪个环境变量npm run dev 就是用的开发环境npm run bulid 用的是生成环境npm run test 用的是测试环境还可以在别的js文件中使用环境变量，`process.env.baseUrl` 这里的环境变量会根据当前`npm run dev`命令运行的环境有关，如果没有`process.env.baseUrl` 变量会找其他文件中的`process.env.baseUrl` ......

出现问题场景：vue运行项目过程中报错检查代码中并无写错的地方其实涉及到这个问题，就是版本原因了，我安装的 scss-loader 版本太高，卸载安装低版本即可npm uninstall --save sass-loader // 卸载npm i -D sass-loader@8.x // 安装npm uninstall --save node-sass // 卸载npm i node-sass@4.14.1 // 安装// 如果node-sass安装失败，也可以直接在package.

原因是版本太高，降级后亲测有效。先降级npm install echarts-gl@1.1.0 --save在安装即可npm install --save echarts-gl原文地址：http://yaoyaoman.cn/blog/archives/211

代码比较简洁好用的原生高德地图api1、在根目录 public 文件夹下的 index.html 中加入2、在 vue.config.js 文件中配置 externals注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。3、实际使用注：init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到

直接引用高德地图 SDK在根目录 public 文件夹下的 index.html 中加入<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key"></script> 在 vue.config.js 文件中配置 externalsmodule.exports = { devServer: { port: 57103 // 端口号配置

问题来源最近在做北京供水系统的时候需要用到地图展示水厂，但是需要做自定义样式，但是官方样式可以，自己的自定义样式不管咋都不行解决官方给出解决方法，附上官方连接：https://lbs.amap.com/api/javascript-api/guide/abc/prepare<script> window._AMapSecurityConfig = { securityJsCode:'你的安全秘钥', }</script>好多人说添加上面

组件地址：https://element.eleme.cn/#/zh-CN/component/installationmain.js引入组件示例

选择第1个，创建vue3版本的；第2个是vue2版本的。创建完成。

根目录新建文件vue.config.js用法

我用的vue3版本安装路由命令src根目录下创建router文件夹，并且创建index.js文件index.js文件写入下面代码在main.js中引入router让整个应用都使用路由App.vue中配置下面代码配置完成