首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

自定义webpack配置别名在ionic 2中不起作用

在Ionic 2中,自定义Webpack配置别名可能不起作用的原因有以下几点:

  1. 配置错误:首先,需要确保你正确地配置了Webpack的别名。在Ionic 2中,Webpack的配置文件是webpack.config.js。你可以在该文件中找到resolve.alias属性,并在其中添加你想要的别名。例如,如果你想要将@作为别名,指向src文件夹,你可以这样配置:
代码语言:txt
复制
resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

确保你的配置语法正确,并且别名的路径指向正确的文件夹。

  1. 缓存问题:有时候,Webpack的缓存可能导致别名不起作用。你可以尝试清除Webpack的缓存,然后重新构建你的应用程序。可以通过运行以下命令清除缓存:
代码语言:txt
复制
npm run clean

然后重新构建你的应用程序:

代码语言:txt
复制
npm run build
  1. 引用路径错误:如果你在代码中引用别名时出现问题,可能是因为你的引用路径不正确。确保你在引用文件时使用了正确的别名路径。例如,如果你将@作为别名,指向src文件夹,那么你在代码中引用src/app/app.component.ts时应该写成@/app/app.component.ts

总结起来,要使自定义Webpack配置别名在Ionic 2中起作用,你需要正确配置Webpack的别名,并确保在代码中正确引用别名路径。如果问题仍然存在,可以尝试清除Webpack的缓存并重新构建应用程序。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Windows下Ionic 开发环境搭建

开始之前我假设你已经了解了如下概念: Java JDK Apache Ant Android SDK NodeJS 以上名词这里就不赘述,如果有不清楚的可以自行查阅 安装步骤 Ionic 官方教程:...nmp 安装 Ionic 和 Cordova 完成以上几步需要配置的环境就搭建完成了,接下来就只需要在控制台输入简单的几行命令就可以安装 Ionic 和 Cordova 啦。...app 创建 APP 进入 cmd 窗口,输入如下指令: ionic start myapp 这里的 myapp 是你的 APP 的名字 进入创建的 APP 目录 cd myapp 选择配置 Android...,jks 是 Android studio 生成的签名文件的后缀) -alias:签名文件的别名(这里是 demo,可自定义) -keyalg:使用 RSA 算法对签名加密(默认 RSA ) -validity...有效期限(这里是 10000 天,可自定义) 以上命令 cmd 运行如下: ?

3K30

npm依赖(框架平台)

原生 electron: 无依赖桌面端应用框架 flutter: 无依赖移动端应用框架 ionic: Angular移动端应用框架 ionic-conference-app: Ionic基础应用 ionic-native...: Ionic原生 ionicons: Ionic图标 nativescript: Angular移动端应用框架 ng-cordova: Angular移动端应用框架 quasar: Vue移动端应用框架...: 无依赖小程序框架 脚手架 angular-cli: Angular脚手架 bruce-cli: React脚手架(本人开发,零配置开箱即用,强烈推荐) cordova-cli: Cordova脚手架...: Webpack本地服务器 webpack-hot-middleware: Webpack模块热替换 结语 写到最后总结得差不多了,后续如果我想起还有哪些框架平台遗漏的,会继续在这篇文章上补全,同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解...欢迎在下方进行评论或补充喔,喜欢的点个赞或收个藏,保证你开发时用得上。

2.4K20

Ionic4与Ionic3部分比较

有较长时间没有用Ionic了,见新的公众号需求比较简单,便决定使用Ionic4来实现。...其实,Ionic2和Ionic3的差别不大,而ionic4则变化比较大了,它支持angular、vue、react或其它任意js框架,甚至不使用js框架,它更像一个纯粹UI库。...action-sheet-controller loading-controller …… 前面2个一般是有自定义UI的,ionic3中是可通过自定义组件注入ViewController来关闭窗口,...ionic4中已经没有这个方法,改为通过监听事件或回调给外面的xxx-controller来关闭。...四、主题样式的变更 这一块也是变更比较大的,这个我不详做说明了,有空自己看吧: ionic4主题样式 五、打包 因为默认懒加载,所以能很大提高首屏加载速度,适用于Web项目,但没有Webpack集成,

6.9K10

9个值得推荐的 VUE3 UI 框架

BalmUI 发展非常迅速,如果想使用 Material Design 风格,使用复杂的内置指令(如 debouncing 和 UI 波纹)创建自定义组件时能派上用场,那么它非常适合 Vue3 项目。...Vuestic 提供了 50 多个具有独特功能和广泛可配置性的组件,应式设计,这些组件几乎适用于所有屏幕分辨率。Vuestic 整个框架中提供无缝翻译支持和键盘可访问性。...Element+ 甚至提供开发人员构建 UI 界面时可能需要的最细微的部件,从简单的动画到框架范围的国际化系统,可以与 i18n 配对使用以创建自定义翻译,甚至添加非内置语言。...Ionic Ionic 是最早提供 Vue3 支持的 UI 框架之一, Ionic 更倾向于移动 UI,团队知道如何迎合和维护一个优秀的 UI 框架。...Ionic Vue 是一个很成熟的框架,有一个令人震惊的社区、大量的 StackOverflow 问题、企业支持和一个拥有核心成员的大型 Slack 频道,这使得可以需要帮助时轻松获得支持。

4.4K30

9 个值得推荐的 VUE3 UI 框架

BalmUI 发展非常迅速,如果想使用 Material Design 风格,使用复杂的内置指令(如 debouncing 和 UI 波纹)创建自定义组件时能派上用场,那么它非常适合 Vue3 项目。...Vuestic 提供了 50 多个具有独特功能和广泛可配置性的组件,应式设计,这些组件几乎适用于所有屏幕分辨率。Vuestic 整个框架中提供无缝翻译支持和键盘可访问性。...Element+ 甚至提供开发人员构建 UI 界面时可能需要的最细微的部件,从简单的动画到框架范围的国际化系统,可以与 i18n 配对使用以创建自定义翻译,甚至添加非内置语言。...Ionic Vue 是一个很成熟的框架,有一个令人震惊的社区、大量的 StackOverflow 问题、企业支持和一个拥有核心成员的大型 Slack 频道,这使得可以需要帮助时轻松获得支持。...官方网站:https://next.quasar.dev/ Quasar 是一个完整的、以性能为中心的框架,可帮助构建 Vue 用户界面(SPA、PWA、SSR、移动和桌面),除了 Vue、Node 和 Webpack

5.8K30

2 目录结构

本项目目录结构参考当前网址 参考目录 目录结构修改 vonic-webpack-starter 是vonic-template下载后的目录,自动生成结构保持不变,只需要改变Src目录下的目录结构,对修改后的结构进行简单说明如下...: assets:静态资源 components:自定义组件 router:vue-router路由 store:vuex状态管理 page:页面 utils:工具集 不同的目录结构下包含不同内容...,其中程序员自定义内容主要在page目录下,其他文件夹下都是项目初始配置后不在修改的内容。...Src目录结构图.png 别名设置 进入 build/webpack.base.config.js 设置目录别名 基于1.0设置的文件夹结构,对当前项目设置特殊别名 ?...别名.png vue-router 路由配置 router文件夹下新建router.js,写入基本配置信息 下图是默认的配置信息,定义的router.js 中进行vue-router基础配置,第一行代表引用单页面

89830

2021年最佳VUE3 UI框架推荐

BalmUI 发展非常迅速,如果想使用 Material Design 风格,使用复杂的内置指令(如 debouncing 和 UI 波纹)创建自定义组件时能派上用场,那么它非常适合 Vue3 项目。...Vuestic 提供了 50 多个具有独特功能和广泛可配置性的组件,应式设计,这些组件几乎适用于所有屏幕分辨率。Vuestic 整个框架中提供无缝翻译支持和键盘可访问性。...Element+ 甚至提供开发人员构建 UI 界面时可能需要的最细微的部件,从简单的动画到框架范围的国际化系统,可以与i18n 配对使用以创建自定义翻译,甚至添加非内置语言。...Ionic Vue 是一个很成熟的框架,有一个令人震惊的社区、大量的 StackOverflow 问题、企业支持和一个拥有核心成员的大型 Slack 频道,这使得可以需要帮助时轻松获得支持。...官方网站: https://next.quasar.dev/ Quasar 是一个完整的、以性能为中心的框架,可帮助构建 Vue 用户界面(SPA、PWA、SSR、移动和桌面),除了 Vue、Node 和 Webpack

4.1K20

前端构建工具 webpack 笔记

1、创建包管理文件:package.json npm init -y 2、编写业务代码 2)下载 webpack webpack-cli 到当前项目中(版本独立),并配置局部自定义命令...11、webpack 的 打包模式 打包模式:告知 Webpack 使用相应模式的内置优化 1、 webpack.config.js 配置文件设置 mode 选项 2、 package.json...,执行 cross-env :固定 NODE_ENV=production :自定义的,也可以直接写 a=b,但是为了语义化点 3、 webpack.config.js 区分不同环境使用不同配置...alias 【用 @ 来代表 src 绝对路径】 解析别名配置模块如何解析,创建 import 引入路径的别名,来确保模块引入变得更简单 例如:原来路径如图,比较长而且相对路径不安全 解决:... webpack.config.js 中配置解析别名 @ 来代表 src 绝对路径 官网网址指向:webpack 中文文档 (docschina.org) module.exports = { /

11310

webpack配置别名alias出现的错误匹配

结合起来,则更为方便的自定义工作流程。...---- [TOC] webpack的alias匹配问题初现 webpack.config.js中,通过设置resolve属性可以配置查找“commonJS/AMD模块”的基路径,也可以设置搜索的模块后缀名...,当然,最后一个就是我们要讲的别名alias设置。...跟踪问题 模块开发过程中,我们可能会对可以复用的组件封装成一个可被git管控的模块,并在引用的过程中采用带版本号的方式引用,这就要求我们webpack.config.js中添加相关alias配置,如...= aliasValue) webpack的作者貌似有些多此一举了,或者说是我们的应用场景中并没有考虑到,所以仅仅针对这个判断进行修改就可以满足需求。

1.4K60

vue2脚手架之自定义组件的总结

vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持, 相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK。...注意:如果我们只写(@click=“xxx”)是不起作用的,我们必须这样写:         @click.native="xxx" 展示结果:但我们绑定完一个点击事件给子组件时,点击组件的范围就会出现相应的结果...当我们app.vue给子组件绑定事件时,其实vue自动的给我们子组件的最外部的跟标签添加相应的事件!...3.绑定自定义事件:                 1.第一种方式,父组件中:                 或<Demo v-on:atlqj="test...$on('atguigu',回调)绑定<em>自定义</em>事件时,回调要么<em>配置</em><em>在</em>methods中,要么用箭头函数,否则this指向会出问题!

68730

一张图教你快速玩转vue-cli3

你将会了解如下知识点: 如何安装项目插件 添加浏览器支持 如何配置scss/stylus共享全局变量 如何整合elementUI等第三方框架并实现按需引入 配置单/多页面 如何配置自定义环境变量 如何在...vue.config.js定制自己的webpack vue项目部署 说明 本文末尾会给出一个以上提到的所有功能的一个配置文件,可供大家学习参考。...最后可以vue.config.js做webpack自定义配置 2.添加浏览器支持 browserslist我们可以通过package.json 文件里的 browserslist字段或一个单独的 .browserslistrc...我们可以使用cli支持的链式调用,或者自定义调用: // vue-cli内部webpack配置 chainWebpack: config => { // 设置快捷目录别名...配置 chainWebpack: config => { // 设置快捷目录别名 config.resolve.alias.set('utils',resolve

3K80

我曾为配置 Webpack 感到痛不欲生,直到我遇到了这个流式配置方案

今天给大家介绍社区当中一个 webpack 的流式配置方案——webpack-chain,这个方案现在已经我目前所在的团队落地,且带来了一些正向的收益,现在就这个方案出现的背景、核心概念及日常使用姿势给大家展开介绍...Webpack当中,我们如果不用其他的方案,就只有手动地配置一个巨大的 JavaScript 对象,所有的配置信息都在这个对象当中,这样原始的方式的确给人体验很不好,归纳为以下几个原因: 对象过于庞大...entry 和 output 这里列举一个常用的配置,由于 Webpack entry 和 output 挂了太多属性,大家参考 Webpack 官方文档照着如下的方式去配就好了。...[chunkhash].js") .libraryTarget("umd") alias 对于路径别名配置,也是几乎所有项目必不可少的部分,配置方式如下: // 可以发现 resolve.alias...作为 webpack 的流式配置方案,通过链式调用的方式操作配置对象,从而取代了以前手动操作 JavaScript 对象的方式,方便复用配置的同时,也使代码更加优雅,无论是从代码质量,还是开发体验,相对于之前来说都是不错的提升

1.2K20

一张图教你快速玩转vue-cli3

你将会了解如下知识点: 如何安装项目插件 添加浏览器支持 如何配置scss/stylus共享全局变量 如何整合eleemntUI等第三方框架并实现按需引入 配置单/多页面 如何配置自定义环境变量 如何在...vue.config.js定制自己的webpack vue项目部署 说明 本文末尾会给出一个以上提到的所有功能的一个配置文件,可供大家学习参考。...最后可以vue.config.js做webpack自定义配置 2.添加浏览器支持 browserslist 我们可以通过package.json 文件里的 browserslist字段或一个单独的 ....我们可以使用cli支持的链式调用,或者自定义调用: // vue-cli内部webpack配置 chainWebpack: config => { // 设置快捷目录别名...配置 chainWebpack: config => { // 设置快捷目录别名 config.resolve.alias.set('utils',resolve

2K10
领券