精华内容
下载资源
问答
  • vue 项目打包 报错

    2021-10-26 14:39:54
    再执行 npm run build 之后,会生成一个dist文件夹,打开index.html,控制台报错 如下图所示: 这里是因为找不到正确的路径,导致报错。 解决办法: 1、在根目录下,新建vue.config.js文件,当然有的话,就...

    再执行 npm run build 之后,会生成一个dist文件夹,打开index.html,控制台报错

     如下图所示:

    这里是因为找不到正确的路径,导致报错。

    解决办法:

    1、在根目录下,新建vue.config.js文件,当然有的话,就忽略此条;

    2、在vue.config.js里 将publicPath: "/" 改为 publicPath: "./" ,之后重新打包,npm run build 即可。

    publicPath: "/"         =====>>>>>>>      publicPath: "./"

     至于编写的位置,可以参考下面的代码:

    module.exports = {
      devServer: {
        port: 8080, // 端口号
        open: true
      },
      lintOnSave: false,// eslint-loader 是否在保存的时候检查
      publicPath: "./",// 基本路径
      outputDir: "dist",// 输出文件目录
      assetsDir: "static",//设置放置打包生成的静态资源 (js、css、img、fonts) 的目录。
      indexPath: 'index.html'//用于设定打包生成的 index.html 文件的存储位置
    }

     希望可以帮助到更多的小伙伴,也欢迎大家在评论留言!!

    展开全文
  • Vue项目经验总结 1.环境&资源问题 1.1.如果生成私钥提示没有这个目录 一般git安装成功之后,会在C:\Users\下创建.ssh目录。如果没有就会出现上述问题。 检查是否安装成功:cmd中执行:git --version (两个-) ...

    Vue项目经验总结

    1.环境&资源问题

    1.1.如果生成私钥提示没有这个目录

    在这里插入图片描述
    一般git安装成功之后,会在C:\Users\下创建.ssh目录。如果没有就会出现上述问题。
    检查是否安装成功:cmd中执行:git --version (两个-)
    如果没有正确提示版本号,则配置一下git环境变量(看问题1.5)
    如果电脑用户名是中文名字,需要修改为英文
    https://jingyan.baidu.com/article/59703552843c458fc0074005.html
    可能是中文名字,导致没有创建.ssh目录
    如果改完电脑用户名之后,执行ssh-keygen还是不行的话,就重装git
    但是经过测试,很多同学的电脑用户名都无法修改,如果是这样,只能重装系统_
    给电脑起中文名,多么痛的领悟…

    1.2.无法导入mydb.sql问题

    解决方法

    1. 找到my.ini文件在这里插入图片描述

    2. 修改内部的数据库引擎为INNODB
      #默认为MyISAM
      #default-storage-engine=MyISAM
      #改为INNODB
      default-storage-engine=INNODB
      #支持 INNODB 引擎模式。修改为 default-storage-engine=INNODB 即可。
      #如果 INNODB 模式如果不能启动,删除data目录下ib开头的日志文件重新启动。

    3. 重新导入mydb.sql

    1.3.导入mysql另一个问题

    在这里插入图片描述
    如果出现这个问题,说明是mysql没有启动
    通过php软件启动mysql
    或者cmd命令中执行,net start mysql

    1.4.git环境变量配置

    参考 —> Windows10下Git环境变量配置
    最后一步是重启cmd

    1.5.第一次push时,输错密码

    删除windows凭据:Win10系统如何删除Windows凭据

    1.6.postman不需要注册在这里插入图片描述

    1.7.vscode保存代码,直接报错

    在这里插入图片描述
    分析

    1. 这是因为默认保存时,自动格式化代码给代码前,添加了一个tab键,而tab键是4个空格,但是eslint语法要求只能是2个空格。
      以及双引号,末尾分号,这些eslint都不允许。
      如果我们一个一个自己修改,太麻烦了。
      我们可以通过一个插件:eslint
      然后在用户设置中增加:(vscode版本:1.19.1测试OK)
      “eslint.autoFixOnSave”: true,
      这样以上问题都可以解决:空格问题,引号问题,末尾分号问题。

    2. 补充:
      如果VSCode版本比较高(1.42.1测试OK),则换成
      “editor.codeActionsOnSave”: {
      “source.fixAll.eslint”: true
      },
      还有一种方式,可以不让代码报错,但是保存代码时不会修复空格引号问题在这里插入图片描述

    3. 补充:或者我们可以直接关闭eslint的语法校验在这里插入图片描述
      这样做之后,末尾分号,双引号等等问题,不会再报错。
      保存之后,生成了一个配置:(如果出现了关闭之后,自动打开,就自己添加如下配置在这里插入图片描述

    1.8.iconfont 无法正常显示,出现口

    这是素材中的资源有兼容问题,我重新下载了,大家找fonts_new.zip
    注意:打开demo_index.html,切换Font class,然后按照后续步骤操作
    在这里插入图片描述

    2. 项目

    2.1. Cannot read property ‘$createElement’ of undefined

    错误如下:不能读取undefined对象的$createElement属性在这里插入图片描述
    解决:路由规则component写成了components,注意没有s

    由于是通过components指定了/login的组件,所以相当于没指定,那么在路由初始化的时候要调用/login对应组件的 c r e a t e E l e m e n t 属 性 , 所 以 报 错 了 。 没 指 定 , 那 就 是 u n d e f i n e d , 所 以 就 是 不 能 读 取 u n d e f i n e d 对 象 的 createElement属性,所以报错了。没指定,那就是undefined,所以就是不能读取undefined对象的 createElementundefinedundefinedcreateElement属性

    2.2.git命令无法执行

    问题如下:没有一个git仓库,没有.git文件夹 在这里插入图片描述
    问题分析:

    1. 通过脚手架创建的项目,已经默认勾选了git初始化,所以默认在项目根目录会有一个.git文件夹,有了这个文件夹就说明我们的项目已经被git管理起来了
      如果想执行,git相关命令,需要在有.git文件夹的目录下才能执行、
      出现上述问题,可能有两个原因:
      1.创建项目时,没有勾选git初始化
      2.执行git命令时,项目目录进错了
    2. 问题解决:
      找到包含.git文件夹的目录,再执行git命令
      或者:在vue_shop目录下执行git init命令,进行git初始化,它会帮助你创建.git文件夹

    2.3.this relative module was not found

    问题如下:这个相关的模块没有找到在这里插入图片描述

    问题分析:
    在main.js中没找到iconfont.css,这种问题,一般都是路径问题
    问题解决:
    在mian.js中确定引入iconfont.css的路径,看是否有误

    2.4.代码切换分支合并分支时被删除

    问题描述: 当我们切换master分支之后,发现login分支的代码消失
    问题分析:在这里插入图片描述

    login分支,创建login.html
    当切换到master的时候,login.html消失(这是因为master本来就没有这个文件,肯定会消失)
    但是,在merge login之后,login.html就回来了
    如果想回退版本:
    git log(查看想要回退的版本号)
    git reset --hard 版本号
    git reset --hard f31cf29afe79a6374e12183541994624221a0e1d 902b8494192a9bc8c3947e39c8494ee6d3878ec8

    2.5. POST http://localhost:8080/login 404 (Not Found)其他问题雷同

    问题描述:在这里插入图片描述
    问题分析:
    发送的接口请求地址错了
    解决问题:
    检查两个地方:
    A)main.js中配置请求的根路径是否出错,包括单词大小写:
    axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’
    B)Login.vue中发送的请求接口地址是否写错:
    const {data:res} = await this.$http.post(“login”, this.loginForm);

    2.6.Element-ui表单总结

    2.6.1.表单数据双向绑定在这里插入图片描述

    在这里进行双向数据绑定的时候,我们是将要绑定的data属性放到了loginForm对象中,然后再进行的绑定,这样做方便后续数据的提交,等到提交数据的时候,直接将loginForm对象提交到后台即可

    2.6.2.表单校验规则在这里插入图片描述

    loginFormRules是一个对象,在对象中可以指定多个字段的校验规则
    username是其中一个校验规则,而这个校验规则是有必填和长度这两个校验规则组成的
    每一个校验规则都是一个对象,对象中有三项信息
    1.校验规则:required必填,min-max长度
    2.校验失败时的提示信息:message
    3.何时触发校验:trigger(触发器):blur(失去焦点),意味失去焦点触发此校验规则

    2.6.3.表单提交在这里插入图片描述

    • 失去焦点需要校验表单,但是最后表单提交的时候,也需要再次校验表单
      • 因为程序员可以通过程序,让表单数据自动填充,所以界面的失去焦点方法校验表单并不完全可靠
      • 其实最后表单提交的时候再次校验,程序员也是可以跳过的,比如通过postman发起请求,不通过界面发起请求,所以前端所有的校验都不靠谱,后端servlet收到数据之后,也还是会重新校验的
    • 注意:这里的validate是el-form的方法,我们需要获取el-form对象之后才能调用,如何获取呢?因为Vue不再通过原始方式获取DOM元素对象,所以采用ref引用名的方式:
      1. 只要标签添加ref属性,就会给当前标签创建对象,并且将对象存储到$refs中
      2. vue实例有一个属性 $refs , 存储当前界面中所有带有ref属性的标签的对象
      3. 比如此界面中有俩标签添加有ref:
        (1)
      4. 那么$refs对象就长这样: {“loginForm”:el-form,“item1”:el-form-item}
      5. 所以可以通过如下方式获取:
        (1)this. r e f s . l o g i n F o r m t h i s . refs.loginForm this. refs.loginFormthis.refs.item1
        (2)this. r e f s [ " l o g i n F o r m " ] t h i s . refs["loginForm"] this. refs["loginForm"]this.refs[“item1”](这个$refs比较特殊,可以通过中括号方式获取属性)
    • validate方法的参数是一个回调函数,函数的参数是校验结果
      • 校验通过,valid=true
      • 校验失败,valid=false
    • 最后需要注意,validate方法内部用到了el-form的model属性,所以如果没有写如下属性:在这里插入图片描述
    • 会报错:在这里插入图片描述
      model是校验工作必须的属性

    2.6.4.表单数据重置在这里插入图片描述

    el-form还有一个方法resetFields,重置字段,会将用户输入的信息以及校验信息都清空 。

    3.

    3.1. TypeError: cannt read property ‘cancelToken’ of undefined

    问题描述:在这里插入图片描述
    问题分析:
    在main.js的拦截器中没有return返回值
    解决问题:
    在main.js的拦截器中return config,固定写法

    3.2.bug调试-network

    如果写完代码没有出现你想要的效果,排错步骤如下:
    1.右键,查看console,如果有错误,其实是好事,因为最起码有错误提示
    2.仔细查看错误,在此文档中查找看有没有类似的错误,如果有按照笔记解决
    3.如果没有,那么就将错误翻译成中文,尝试理解错误是什么意思
    4.实在不行,将错误放入百度,进行搜索
    5. 3-5分钟搞不定的,立马问老师,经过老师的调试,错误搞定之后,一定要将错误收录到此文档中,积累错误文档,是一件非常重要的事情,这些错误就是你的经验
    6.如果console里没有错误,那么我们就需要查看network,看一下请求是否有问题
    7. 比如,用户列表
    8. 先看General 在这里插入图片描述
    注意会发现有两个users请求,看第二个
    查看Request URL,Request Method,Status Code是否有问题
    9. 查看请求参数,是否有问题 在这里插入图片描述
    10. 查看响应数据 在这里插入图片描述

    展开全文
  • vue控制台报错

    2021-11-30 10:59:58
    vue报错 我们在使用vue时总会在控制台看见这样一段话 这是因为我们使用的是vue的开发版本,在产品上线时为了减轻服务器的负担和各种问题不建议我们使用这个开发版本,那我们要是想要去掉这个提示的话怎么办呢? 哎,他...

    vue报错

    我们在使用vue时总会在控制台看见这样一段话

    image.png

    这是因为我们使用的是vue的开发版本,在产品上线时为了减轻服务器的负担和各种问题不建议我们使用这个开发版本,那我们要是想要去掉这个提示的话怎么办呢?

    哎,他的解决方法就来了:

    加入这样一句话就解决了

    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    

    image.png

    1638241179690)]

    这样我们的控制台就光秃秃的了,什么都没有了√

    展开全文
  • 运行vue项目报错The template root requires exactly one element 在终端输入npm run serve运行vue项目后,报错The template root requires exactly one element,解决方案: 第一步:先看是否安装了Vetur插件,...

    运行vue项目时报错The template root requires exactly one element

    在终端输入npm run serve运行vue项目后,报错The template root requires exactly one element,解决方案:

    第一步:先看是否安装了Vetur插件,没有安装的话按照下图安装一下,下图用的是vscode软件

    在这里插入图片描述

    第二步:安装好了Vetur插件后,依次点击文件=》首选项=》设置,然后在最上面的输入框内输入eslint来搜索 Vetur的验证模板,取消勾选Validate vue-html in using eslint-plugin-vue(把对勾取消掉,像图片上一样)

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 项目打包优化阶段,为了解决打包成功后,单文件体积过大的问题,可以通过 webpack 的 externals 节点,来配置并加载外部的 CDN 资源。 一、具体的配置代码 vue.config.js文件中的配置 module.exports = { ...
  • 报错如下:webpack prod配置如下:const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');const merge...
  • 报错的源头就是src前面那个冒号,这是vue的v-bind的缩写,它是一个 vue 指令,用于绑定 html 属性。因为原代码从data中取值,所以不会报错: 那么新代码里把":"去掉就可以了,因为这里不需要绑定: 虽然是很不值一...
  • 刚开始学前端知识,在调用后端接口时出现:报错 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource。 我的前后端时分开的,前端端口是8080,后端...
  • 可以看出,js、css在index.html的同级目录下; 然后,查看index.html,看到下面的代码 <script type=text/javascript src=/static/js/app.41ce5f66426864089c57.js></script> 我们先普及下文件路径的...
  • vue ui报错求助

    2021-09-07 18:04:42
    我的这个比较厉害了,vue版本3.0以上,因为第一次下载的时候看了一个博主的博客配置了项目,我感觉是项目配置时候出错了,不应该配置应该直接vue ui,但是我配置过了项目在这里, 在这里我的疑问是如何找到之间的....
  • 创建一个简单的vue 项目,页面无显示,打开控制台,出现错误:Uncaught ReferenceError: Vue is not defined 参照其他博客试了一些方法,不顶用,没办法,对着模板逐条语句检查,才找到错误:创建vue实例时没有首...
  • vue项目初始化时,默认安装ESLint(ESLint是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码) 这里解决方法是关闭ESLint,方法如下。 打开项目的…/build/webpack.base.conf.js文件...
  • 一.vue项目报错总结

    2021-03-08 11:01:06
    1.vue项目报错Expected indentation of 2 spaces but found 4 报错原因 严格的检查缩进问题,不是报错,我们可以关闭这个检查规则 解决方案 找到 [ .eslintrc.js ] 的文件,添加"indent": ["off", 2] ....
  • 1.VScode编辑器增加了一行代码import func from './vue-temp/vue-editor-bridge'; 自己并未引入这个东西,导致一直找不到原因 2.降级 prettier 至1.8.1 ,vueter 至0.18.1 成功解决类似问题。
  • 这个原因是使用了History 模式HTML5 History 模式 | Vue Router 我没找到解决办法 所以就把路由改为hash模式了 我用的cli3 本来是这样的 import {createRouter, createWebHistory} from 'vue-router' const ...
  • vue项目部署到nginx(超级详细) 系统:ubuntu20 安装nginx: 可以先创建一个nginx目录,我的目录在 /usr/local/nginx下 一、安装nginx 1. 安装依赖 $ sudo apt-get install gcc zlib1g-dev libpcre3 libpcre3-dev ...
  • 这篇文章主要为大家详细介绍了分析vue 兼容IE报错解决方案,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!IE 页面空白报错信息【图片暂缺】【图片暂缺】此时...
  • vue项目整个拷贝到U盘,拷贝后的项目运行后报错 原因:下载的依赖包用cnpm i 下载,拷贝后node_modules中下载的依赖容易丢失,就会造成项目运行不起来 解决办法:首先我们卸载依赖包:cnpm uninstall 依赖包的...
  • WebPack+Vue构建HTML报错

    2021-06-24 06:41:52
    先上一张报错截图,package.json文件内容如下{"name": "x-","version": "0.0.1","description": "x","main": "main.js","scripts": {"start": "webpack-dev-server","server": "webpack-dev-server --inline --hot"}...
  • ERROR Error: Cannot find module 'vue-loader-v16/package.json'
  • 今天在测试反向代理的时候,访问本地接口的时候报错Proxy ...See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED). 首先看编译器报错 出现这种问题大致两种原因
  • 解决方法: 找到build->webpack.base.conf.js文件,将createLintingRule方法里面的代码注释,如下: 然后要重启服务
  • 先来一张报错的截图先去配置环境变量c:\users\lgd\appdata\local\programs\microsoft vs code\bin的后面配置 ;%systemroot%\system32;一定要注意分号,然后在path环境中配置c:\windows\system32最后去项目安装依赖 ...
  • vue文件中,写法如下,会报语法错误render(h, context) {const { icon, title } = context.propsconst vnodes = []if (icon) {vnodes.push()}if (title) {vnodes.push({(title)})}return vnodes}两种解决方案在vue ...
  • IE 页面空白报错信息此时页面一片空白报错原因Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法...
  • 创建vue3.0项目报错: ERROR Error: spawn yarn ENOENT Vue CLI v4.5.11 Failed to check for updates Creating project in /Users/xxx/Desktop/vue-3/vue3-demo. Initializing git repository... Installing ...
  • 3. 在vue项目中配置文件步骤 4. 在配置完成后处理IatRecorder.js 里new Woeker()会报错的问题 现在开始: 第一步:我们到官方先下载个js版的demo,拿到IatRecorder.js和transcode.worker.js文件复制到src下面 ...
  • 这是定义了一个变量但是未使用到该变量,vue经常需要在全局进行声明,以便任何组件都能用到,但是经常会这样警告 可以在 .eslintrc.js 文件中修改配置,增加如下代码: "no-unused-vars":"off" 添加完之后需要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,576
精华内容 11,030
关键字:

vue项目html报错

vue 订阅