解决vue项目运行提示Warnings while compiling.警告的问题

是因为创建项目的时候设置了eslint所以才会有下面的警告，Use ESLint to lint your code? (Y/n) 这一步选no

如果不想有规范的js代码，可以关掉eslint。

解决办法：

1、找到build下面的webpack.base.conf.js

注释后重启项目

2、或者打开config文件下的index.js,里useEslint改为false，重启项目

补充知识：vue cli3 热更新 保存时自动刷新页面内容 + 分离环境变量.env package.json配置

前几天ts+vue3.0+view-design撸了一个项目，然后总感觉哪里不对劲，今天终于醒悟了原来是热更新没开

在vue.config.js中配置以下选项

const IS_PRO = ['production', 'test'].includes(process.env.NODE_ENV);

css: {
  // 是否使用css分离插件 ExtractTextPlugin
  extract: IS_PRO,
  // 开启 CSS source maps 打包时不生成.map文件?
  sourceMap: false,
  // css预设器配置项
  loaderOptions: {
  },
  // 为所有的 CSS 及其预处理文件开启 CSS Modules。
  // 这个选项不会影响 `*.vue` 文件。
  requireModuleExtension: true
 },

上文中用到了process.env环境变量，那么这里在安利一个知识点吧

package.json

 "scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build:dev": "vue-cli-service build --mode development",
  "lint": "vue-cli-service lint"
 },

环境变量存放地址

优先级.env<.env.any<.env.any.local （.local文件会被 git 忽略）

npm run serve 会默认找到.env.development文件配置

npm run build会默认找到.env.production文件配置

当然我们可以把本地的配置放置在.local内用于本地配置，然后对应的线上和测试环境放置不同的文件，打包上线时 对应的 npm run build --文件名称就行了比如npm run build --development

以上这篇解决vue项目运行提示Warnings while compiling.警告的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli 关闭热更新操作

    vue 手脚架在使用过程中,更改代码会自动更新页面,非常的方便,但是有些情况向关闭掉这热更新功能,我使用的是vue-admin-template模板来开发的,所以更改也是基于这个模板的. 在build文件夹下有个webpack.dev.conf.js文件. 然后添加一个配置项:inline: false 即可关闭热更新操作. 补充知识: vue多页面热更新缓慢原因以及解决方法 热更新慢的原因 多页面就是多入口,会生成多个html文件,之前我基本都是单页面,因为是单入口没有这个问题,当偶然间接触了

  • vue项目中播放rtmp视频文件流的方法

    想要播放rtmp视频文件流用H5的video标签是不可行的,所以这里我引用了一款插件 vue-video-player ,当然想要流畅的运用 vue-video-player 播放视频还必须安装辅助插件 videojs-flash.最后还要特别注意的是必须使用npm安装,当然我在安装过程中也遇到了一个问题,就是在选择使用 vue-video-player前还安装了videojs插件,卸载从新安装 vue-video-player时由于项目中有以前安装的其他视频组件影响,一直运行不起来,后面我把n

  • vue项目实现多语言切换的思路

    Web 项目多语言(i18n,即国际化)是比较常见的需求,常规的做法大概有以下几种: 每种语言单独开发页面,适用于 CMS 之类的网站 多语言文本和页面结构分离,运行时动态替换.适用于单页应用(SPA) 直接用网页翻译插件,机器翻译.这种效果不太理想,同时有一些局限性(后面会讲到) 问题 每一种方案都有各自的优点和局限性,具体项目应该根据实际情况选择.最近在工作中碰到的需求是要在现有的项目基础上快速推出多语言版本.项目是基于 Vue.js 开发的,已经迭代过很多版本了.其实一开始是有规划多语言的

  • vue-cli3 热更新配置操作

    问题: 在使用vue-cli3搭建项目之后,发现修改.vue文件里面的内容之后,页面不会自动刷新. 解决方案: 只需要在vue.config.js文件中配置一下就可以实现热更新了,如下: chainWebpack: config => { // 修复HMR config.resolve.symlinks(true); }, 是的就是这么简单. 修改一下标签里面的内容,ok可以自动更新.开森!!! 好像有点开心的太早,修改css部分的内容并没有自动更新,原来的vue.config.js中的css配

  • 解决vue项目运行提示Warnings while compiling.警告的问题

    是因为创建项目的时候设置了eslint所以才会有下面的警告,Use ESLint to lint your code? (Y/n) 这一步选no 如果不想有规范的js代码,可以关掉eslint. 解决办法: 1.找到build下面的webpack.base.conf.js 注释后重启项目 2.或者打开config文件下的index.js,里useEslint改为false,重启项目 补充知识:vue cli3 热更新 保存时自动刷新页面内容 + 分离环境变量.env package.json配置

  • 解决vue项目运行出现warnings potentially fixable with the `--fix` option的报错问题

    解决vue项目运行出现warnings potentially fixable with the `--fix` option的报错问题

    问题:vue-cil3 运行报错 warnings potentially fixable with the `--fix` option. 原因:与创建项目 eslint 设置有问题,可以通过"-fix"选项修复 解决办法:将一下部分:"lint": "vue-cli-service lint" 修改为:eslint --fix --ext .js,.vue src 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 解决vue项目运行npm run serve报错的问题

    先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 :%SystemRoot%\system32;一定要注意分号, 然后在path环境中配置C:\Windows\System32 最后去项目安装依赖 npm i 运行项目 npm run serve 如果这样子项目还是报同样的错误,那么就把node全局卸载,去控制面板卸载,然后安装,最后安装依赖,运行项目就可以成功了 补充知识:vue

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

  • 解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

    Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最后单页面的最终文件. 问题一:我在打包完成后,打开index.html文件发现地址并没有携带路由. 这样的话页面就是空白了,因为没有组件被添加到页面中.打开F12会看到一堆的红色failed请求.打开请求地址是这样的. 进入D盘就开始寻找static文件夹当然是找不到的.既然知道了是打包之后寻找文件

  • 使用kbone解决Vue项目同时支持小程序问题

    什么是kbone 微信小程序开发过程中,许多开发者会遇到 小程序 与 Web 端一起的需求,由于 小程序 与 Web 端的运行环境不同,开发者往往需要维护两套类似的代码,这对开发者来说比较耗费力气,并且会出现不同步的情况. 为了解决上述问题,微信小程序推出了同构解决方案 kbone 来解决此问题. 那么, kbone 要怎么使用呢?这里我们将通过一个 todo 的例子来跟大家讲解. 基本结构 首先,我们来看下一个基本的 kbone 项目的目录结构(这里的 todo 是基于 Vue 的示例, kb

  • 解决vue项目input输入框双向绑定数据不实时生效问题

    我就废话不多说了,大家还是直接看代码吧~ <input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> 这样的输入框,绑定的是data中的form对象上的phone字段. 在mounted钩子函数里边写: this.form.phone = '1888888888'; 这样在页面上时候不会随着输入框值改变而改变. 解

  • 解决vue项目打包上服务器显示404错误,本地没出错的问题

    1.使用脚手架搭建一个vue项目 2.运行,在本地运行没问题,接着打包上服务器,遇到404的错误,如下 这是webpack打包的结果,解决办法如下 1.修改build文件夹下的utils.js文件,大约在51行添加 publicPath:"../../" if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:&quo

  • 解决vue项目本地启动时无法携带cookie的问题

    解决vue项目本地启动时无法携带cookie的问题

    解决vue项目打包部署到服务器上可以正常登录,本地启动时无法携带cookie 说一下问题:公司的老项目,从gitLab上克隆下来,启动之后登录,接口返回登录成功,然后又调用其他的接口的时候返回未登录,查看请求头,未携带cookie,因此调用接口的时候提示未登录. 但是同样的代码打包部署之后一切正常,调接口的时候是携带cookie的,一通百度之后终于解决了. 我用的是谷歌chrome浏览器 解决步骤如下: 1.在浏览器地址栏访问chrome://flags 2.搜索框内搜索SameSite,然后把

  • vue项目运行或打包时,频繁内存溢出情况问题

    vue项目运行或打包时,频繁内存溢出情况问题

    目录 vue项目运行或打包,频繁内存溢出 解决方案 项目内存溢出导致项目启动失败解决 现象 方案 vue项目运行或打包,频繁内存溢出 Vue项目运行或打包时,频繁内存溢出情况 CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 前端使用基于vue的Nuxt框架,但是随着项目功能增多,项目变大,频繁出现此种情况,原因是项目太大,导致内存溢出,排除代码问题外,可参照以下方式解决 解决方案 1.全局安装increa

随机推荐