Taro多环境配置

Taro项目在开发一定阶段后,就会面临环境部署的问题了,比如本地的开发环境,服务器的测试环境,如果每次打包都手动切换环境的话,实在是太不优雅了。
那么有没有什么办法,可以在打包的时候决定环境,并进行配置呢,答案是有的。

Taro在配置项里,有一个参数defineConstants,这个参数与同名Webpack参数一样,是可以在编译打包的时候,配置一个或多个全局的变量,通过打包参数的判断来切换变量,这样就可以实现多环境多配置的切换了。

Taro使用绝对路径引用

Taro项目初始化完毕之后,在编写组件的同时,需要进行页面与组件的组合和引用,这时,使用Vscode的默认提示的引用,会提示找不到/src路径,但是手工引用相对路径,却可以正常引用成功。

1
Module not found: Error: Can't resolve '/src/components' in '/xxx/project/src/pages/index'

但是很多时候,组件的位置会需要调整,每次都使用相对路径是十分繁琐的,能否使用绝对路径呢?是不是Taro就不支持绝对路径呢?

查看Taro说明之后可以发现,Taro确实是不允许“直接”使用绝对路径引用的,但是我们可以通过设置目录别名,来引用路径。

Taro使用tailwindcss+styled-components

提示:如果需要使用Taro编写小程序而不是H5的话,此方案并不生效。可参考: https://docs.taro.zone/docs/css-in-js

在用Taro框架写小程序的时候,写组件样式的时候,总觉得全部写在css文件里,如果需要通过某个参数来调节不同的样式,那么就比较麻烦。

这时候就想到了styled-components,同时又由于上一个项目是使用tailwindcss来编写的样式,那么有没有办法可以使用styled-components的语法来写tailwind呢?

搜索了一下NPM仓库,还真有,tailwind-styled-components可以实现这个功能,但是实现这个功能之前,需要在Taro中安装tailwind。

HTML5 CSS 基础知识

HTML

HTML常见元素

  • header (一些资源和信息描述)
    • meta
    • title
    • style
    • link
    • script
    • base
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×