前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >uni-app项目改用vue-cli npm运行报错及问题总汇

uni-app项目改用vue-cli npm运行报错及问题总汇

作者头像
德顺
发布于 2020-10-26 07:46:56
发布于 2020-10-26 07:46:56
5.3K00
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:0
代码可运行

之前的一个 uni-app 项目,为了方便管理和自动化部署,准备采用 vue-cli 和 webpack 进行部署,遇到了一些问题,记录一下:

当然,如果你是刚开始创建项目,可以直接通过 vue-cli 进行创建:

缺少模块:

Hbuilder 可以直接在插件中心进行插件安装,但是改用 vue-cli 之后有些就不能用了。下面是一些报错信息:

缺少 sass 加载组件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Failed to resolve loader: sass-loader
You may need to install it.

解决方法:安装 sass-loader 依赖

npm 安装:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm i sass-loader --save-dev

yarn 安装:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
yarn add sass-loader --save-dev

缺少 less 加载组件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Failed to resolve loader: less-loader
You may need to install it.

解决方法:安装 less-loader 依赖

npm 安装:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm i less-loader --save-dev

yarn 安装:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
yarn add less-loader --save-dev

缺少 sass 模块:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Error: Cannot find module 'sass'

解决方法:安装 sass 模块

npm 安装:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm i sass --save-dev

yarn 安装:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
yarn add sass --save-dev

缺少 less 模块:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Error: Cannot find module 'less'

解决方法:安装 less 模块

npm 安装:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm i less --save-dev

yarn 安装:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
yarn add less --save-dev

还有一个比较奇葩的报错:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: ../../styles/_variables.scss.
        on line 1 of src/styles/store_tpl.scss
        from line 851 of src/pages/index/store.vue
>> @import "../../styles/_variables.scss";

这个问题搞了半天,最后发现是在 a.sass import 引入了 b.sass 但是 b.sass 的路径不对,找不到这个文件,所以就报这个错误。

检查一下文件路径,看有没有问题,改成正确的就可以了。

未经允许不得转载:w3h5 » uni-app项目改用vue-cli npm运行报错及问题总汇

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uView UI框架Vue CLI空白项目运行报错:this.getOptions is not a function的解决方法
看了一下 uView 文档,使用 Vue CLI 创建了一个 uni-app 项目,因为 uView 有针对 Vue CLI 的空白项目包。
德顺
2023/08/25
8040
uView UI框架Vue CLI空白项目运行报错:this.getOptions is not a function的解决方法
uView UI框架Vue CLI空白项目运行报错:this.getOptions is not a function的解决方法
看了一下 uView 文档,使用 Vue CLI 创建了一个 uni-app 项目,因为 uView 有针对 Vue CLI 的空白项目包。
德顺
2021/04/25
3K1
uni-app HBuilderX 工程转换 vue-cli 工程
2、将 HBuilderX 工程内的文件(除 unpackage、node_modules 目录)拷贝至 vue-cli 工程内 src 目录
风花一世月
2024/03/19
3460
uni-app 安装 scss 引发的报错
最近接手了一个有点历史的小程序,用 uni-app 开发的,没有装 css 预处理器,开发效率有点低,装好之后控制台报错了:
小鑫
2022/04/26
2.6K0
用Vue CLI创建uni-app,摆脱HBuilder,npm命令行运行及发布
除了 HBuilderX 可视化界面,也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。
德顺
2020/10/26
13.6K0
vue安装使用scss报错:Failed to resolve loader: sass-loader You may need to install it.
ERROR in ./src/views/login/index.vue 5:0-77
肥晨
2024/12/02
3930
vue 开发常用工具及配置六:认识各种 loader
默认 webpack 只能处理 js 文件,如果在 js 文件中导入了 css 代码:
LIYI
2020/01/14
2.7K0
vue 开发常用工具及配置六:认识各种 loader
vue-loader是什么?使用它的用途有哪些
vue-loader 是一个用于将 Vue 单文件组件(.vue 文件)转换为 JavaScript 模块的 webpack 加载器(loader)。是 Vue.js 生态系统中的一部分,用于在开发过程中编译和处理 Vue 组件。
王小婷
2023/09/30
4700
Webpack4 搭建 Vue 项目
由于 Parcel 打包工具的影响,webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。对于一些习惯webpack3 的开发者难免有些不习惯。本文就带你绕过 vue-cli,用 webpack4 一步步搭建 vue 项目。
小皮咖
2019/11/05
1.1K0
vue-cli安装、node-sass安装、mintUI组件库安装
1、使用淘宝npm镜像 在node中很多安装失败的原因就是因为国内网络限制因素,所以使用淘宝镜像有利于解决这方面问题。(使用了翻墙、vpn,用install命令行可以正常安装的可以跳过)。
Ewall
2018/09/04
1.6K0
怎么用webpack搭建前端环境?
一、前端构建工具 grunt gulp webpack(主流,https://webpack.js.org/) Fis3(百度) 二、webpack是什么 webpack 是一个现代 JavaScript 应用程序的静态模块打包器 webpack稳定版本:v4.44 三、如何使用webpack搭建前端环境 安装node.js( v12.x) 注意:如果npm安装一些包由于网速原因,安装慢切换一下镜像源 改成淘宝镜像: npm config set registry https://registry.np
江一铭
2022/06/16
1.2K0
webpack从零搭建开发环境
为了方便也可以这么写,使用 npm run 命令这个命令执行的时候默认会把 node_modules 的.bin 文件放到全局上,执行之后销毁npm run buildnpm run dev
小丑同学
2020/09/21
1.3K0
vue3+element-plus+router+vuex+axios从零开始搭建(1)vue3+element-plus
1.下载node, 不要使用最新的版本element-plus组件没支持到最新的版本。
solate
2021/06/21
3K0
vue3+element-plus+router+vuex+axios从零开始搭建(1)vue3+element-plus
6、webpack从0到1-less、sass、postcss
参考链接: postcss-loader webpack css-loader
Ewall
2020/03/20
1.1K0
Vue项目笔记(持续更新)
使用一个Vue实例作为中央事件总线。 Vue内部有一个事件机制,可以参考源码。 $on方法用来监听一个事件 $emit用来触发一个事件。
杨肆月
2019/08/15
1.3K0
Vue项目笔记(持续更新)
vue 学习笔记第四弹 - Webpack
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
syy
2020/04/07
8790
webpack + react + ts + semiDesign +electron
yarn add -D webpack webpack-cli 或者npm install -D webpack webpack-cli
用户4793865
2023/01/12
2.2K0
webpack + react + ts + semiDesign +electron
iui Design一套基于Vue3的Uniapp组件库
iui Design 是一款基于uni-app的前端组件库,它提供了一套可复用、易扩展、低耦合的移动端 UI 组件库,帮助开发者快速搭建移动应用。
iui Design
2023/08/10
9511
iui Design一套基于Vue3的Uniapp组件库
JNPF低代码开发平台移动端项目命令行打包H5改造
JNPF 开发平台的移动端是基于 uni-app 进行开发的,所以可以实现多端应用的快速开发。 但是部署流程就略显繁琐了,JNPF 的移动端并不支持命令行调用打包。
薛定喵君
2021/04/19
1.2K0
JNPF低代码开发平台移动端项目命令行打包H5改造
vue项目实战:实战技巧总结
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
微芒不朽
2022/04/28
3.5K0
推荐阅读
相关推荐
uView UI框架Vue CLI空白项目运行报错:this.getOptions is not a function的解决方法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验