V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LeeReamond
V2EX  ›  Vue.js

vue 项目,开发预览和构建后的页面不一致,求助

  •  
  •   LeeReamond · 2021-04-16 20:37:29 +08:00 · 3782 次点击
    这是一个创建于 1077 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,项目中使用 vue + vuetify + tailwind 。第一次使用 tailwind,没想到遇到这种问题。

    具体表现为,使用 npm run serve 运行开发服务器,显示界面如同代码预期,一切正常。而使用 npm run build 编译项目后使用后端提供服务,则部分样式出现了错误。如同下图

    补充

    1 、整个项目完全由前端构建,全部为静态文件,不涉及任何后端 api

    2 、图中可见,页面使用了两个 vuetify 组件,分别是 header 和两个按钮,这些组件都出现了变形。而使用 tailwind 构建的样式则完全没问题。

    3 、经测试 vue 的 js 代码可以正常运行,输出结果正确

    4 、我测试了一下编译后的 index.html 中加载的样式和脚本文件,全部都可以正常访问,不是由于某个文件无法加载造成的错误。

    5 、图中可以看到,materialdesignicons 的图标是可以正常显示的,说明图标文件加载没问题

    有没有大佬能说下可能是啥原因导致的?

    30 条回复    2021-04-19 17:05:06 +08:00
    bojackhorseman
        1
    bojackhorseman  
       2021-04-16 20:43:05 +08:00 via iPhone
    这显然是 css 的问题
    Pastsong
        2
    Pastsong  
       2021-04-16 20:44:07 +08:00
    css 文件加载路径错了
    bojackhorseman
        3
    bojackhorseman  
       2021-04-16 20:44:36 +08:00 via iPhone
    是不是用的按需加载?打包的时候没把 vuetify 的 css 打包进去
    LeeReamond
        4
    LeeReamond  
    OP
       2021-04-16 20:52:17 +08:00
    @bojackhorseman
    @Pastsong

    是使用的 vue-cli 项目构建文件,我的 vue-cli 是从 3 版本开始学的,3 得时候已经不用 webpack 了,我一直就没学 webpack 。不过应该不是按需加载吧,我的.vue 文件中并没有显式地载入外部 css 文件,都是单个文件自己的 css 。另外我测试了一下不是由于 tailwind 和 vuetify 重名产生的问题,使用 prefix 对状况无改善
    LeeReamond
        5
    LeeReamond  
    OP
       2021-04-16 20:53:12 +08:00
    @Pastsong 为什么加载路径错了,但 dev server 中却可以正常显示呢
    Jirajine
        6
    Jirajine  
       2021-04-16 20:59:45 +08:00 via Android
    f12 看看有没有错误。以及你的 tailwind 是怎么引入的,postcss 有没有正常配置。
    LeeReamond
        7
    LeeReamond  
    OP
       2021-04-16 21:35:39 +08:00
    @Jirajine

    F12 没有错误,整个构建流程是

    1 、vue create project

    2 、cd projext \ vue add vuetify

    3 、然后是 npm 一系列 axios\vuex\vue-router 之类的不太相干的安装

    4 、之后安装 tailwind,首先 npm install tailwindcss

    4.1 、创建 src\assets\tailwind.css

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    4.2 、修改 src\main.js ,增加

    import "@/assets/tailwind.css"

    4.3 、运行 tailwind 初始化

    npx tailwind init --full

    4.4 、创建 postcss.config.js

    内容略长不在这里贴了,跟网上搜到的代码一致

    ====

    全装完之后 npm run serve 可以正常工作,结果写完一个 page,build 就错了,略坑
    LeeReamond
        8
    LeeReamond  
    OP
       2021-04-16 21:43:25 +08:00
    修正,tailwind 安装命令是 npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
    只装 tailwind.css 会出现缺失 postcss 的错误
    Jirajine
        9
    Jirajine  
       2021-04-16 22:02:53 +08:00 via Android
    @LeeReamond f12 打开看看你引入的 tailwind.css 内容是否正常,应该包含 tailwind 中所有你用到的部分,如果没有那就是 postcss 配置出了问题。
    还有一种可能,postcss 会根据你代码中用到的 class name 来把未使用的自动删掉,如果你代码中有字符串拼接 class name 的情况,可能会因为未识别而错误地删掉。

    可能是因为 dev 模式没进行自动删除,所以没有问题。
    mrcotter2013
        10
    mrcotter2013  
       2021-04-16 22:05:25 +08:00 via iPhone
    Vuetify 已经提供不少 css helper classes,用到 tailwind 的地方应该不多,而且也需要协调两者的 theme,fonts, break points 等基本配置,会比较麻烦
    LeeReamond
        11
    LeeReamond  
    OP
       2021-04-16 22:16:53 +08:00
    @Jirajine 我稍后排查一下,不过这里是 tailwind 的样式正确,vuetify 的样式错误,是否是指排查 vuetify,因为 tailwind 似乎不需要排查
    LeeReamond
        12
    LeeReamond  
    OP
       2021-04-16 22:19:42 +08:00
    @mrcotter2013 我也是第一次用 tailwind,不过我感觉二者差很远,vuetify 的响应式断点是通过 js 实现的,而 tailwind 则是通过纯 css,后者比前者香太多了
    Jirajine
        13
    Jirajine  
       2021-04-16 22:30:24 +08:00 via Android
    @LeeReamond 那你还是看一下样式是如何引入的吧。是类名 auto prefix 没匹配上,还是 css 类没有了。可能 postcss 把你 vuetify 的 css 给搞乱了。
    LeeReamond
        14
    LeeReamond  
    OP
       2021-04-16 23:02:05 +08:00
    @Jirajine 检查了一下,应该确实是这个原因了,app.abcdefg.css 里面只有 tailwind 的类,没有 vuetify 的类,这种问题应该怎么修复啊。我的 vue-cli 版本是 4.5,webpack 之类的工具一直没用过
    LeeReamond
        15
    LeeReamond  
    OP
       2021-04-16 23:07:26 +08:00
    github 搜索了一下范例项目,目前还没找到能跑的,不过感觉问题应该是网上的 vuecli 安装 tailwind 的教学的问题,里面的 postcss 配置文件似乎会排除 vuetify 脚本
    xiaoming1992
        16
    xiaoming1992  
       2021-04-16 23:12:46 +08:00
    直接 f12 看看他为什么是这个样式,样式哪里来的,应该可以找到原因啊
    Jirajine
        17
    Jirajine  
       2021-04-16 23:26:49 +08:00
    @LeeReamond #14 看了一下 https://cli.vuejs.org/guide/css.html#postcss vue cli 内部也使用了 postcss,你引入 tailwind 的时候两者共享了配置( tailwind 推荐的引入方式就是作为 postcss 的插件),导致了冲突。
    这种没什么好的办法,需要你对 vue cli /webpack / postcss 它们的构建流程、插件、loader 等都很熟悉才行,还要搞清楚 vuetify 的 css 是怎么引入的,在 postcss 中把它排除掉。
    所以我建议干脆就不要通过 postcss 使用 tailwind 了,改用 tailwind cli 手动生成,参考这个 https://tailwindcss.com/docs/installation#using-tailwind-without-post-css
    然后在你的编译流程中通过命令行调用的方式调用 tailwind cli 。
    LeeReamond
        18
    LeeReamond  
    OP
       2021-04-16 23:59:36 +08:00
    @Jirajine 感谢一路跟踪回复。大略看了一下配置方式 2,似乎这种引入方式不能实现最小构建?强迫症略有些难受。我目前在 gh 找到了一个满足使用条件的最小构建,安装了 vuetify,router,vuex,postcss 和 tailwind,已经测试能够在 build 下共存(但 matirialdesign 的 icon 失效了,这个留待以后解决)。我观察了一下自己能看懂的 src 目录,并未发现什么奇异的地方,不是很理解为什么他的就能够共存而我的就不能够。大佬能帮忙看一下它核心相关代码在哪里吗,我观察 postcss.config.js 文件,里面只有很少的内容,似乎也并不影响什么?

    https://github.com/gcavanunez/starter-vue-vuetify-tailwind-frontend
    Jirajine
        19
    Jirajine  
       2021-04-17 00:30:35 +08:00
    @LeeReamond #18 可以最小的,tailwind-cli build 就是扫描你的代码库把没用到的类都 purge 掉的过程。只不过和原本由 postcss 处理,现在需要分开单独运行。

    那个项目可能是 tailwind.config.js 里 指定了 prefix 有关,你可以试一试。我不太清楚 vuetify 的样式是怎么引入的及具体构建流程。

    webpack 本来就够复杂的了,vue cli 又包了一层。我倒是建议尝试 snowpack/vite/parcel 这种简单的构建工具。vue-cli/cra 这种开箱即用一时爽,出了问题想搞明白很费劲。
    echowuhao
        20
    echowuhao  
       2021-04-17 01:42:46 +08:00
    purge 把所以可能有 tailwind class 的文件都加进去。

    https://github.com/gcavanunez/starter-vue-vuetify-tailwind-frontend/blob/master/tailwind.config.js#L3

    如果你在 index.html 也用了 tailwind,就把 tailwind 也写入 purge
    christin
        21
    christin  
       2021-04-17 11:38:55 +08:00 via iPhone
    @LeeReamond 正好我也在学习 tailwind 18 楼是你的项目吗 我装起来看一下
    GzhiYi
        22
    GzhiYi  
       2021-04-17 18:28:00 +08:00
    我认为是 tailwindcss 在 build 的过程之中把顶栏的样式 purge 掉了。
    在 postcss 配置中的 whitelistPatternsChildren 增加白名单试试?
    changdy
        23
    changdy  
       2021-04-17 20:10:58 +08:00
    2333 前端现在黑箱比后端还严重....

    有时候出问题了都不知道哪个步骤引入的
    leega0
        24
    leega0  
       2021-04-18 15:08:12 +08:00
    @changdy 莫要黑,很明显,楼主不是一个前端,这种问题,专业的前端看标题就知道是什么原因了
    changdy
        25
    changdy  
       2021-04-18 19:35:51 +08:00
    @leega0 2333 木有黑..现在好多传统公司 是真的已经请不起能把 webpack 各种配置搞得明白的前端了...
    echowuhao
        26
    echowuhao  
       2021-04-18 23:44:51 +08:00
    前端一直黑箱严重。
    doco
        27
    doco  
       2021-04-19 10:02:18 +08:00
    我倾向于只使用一个样式库, 同时使用多个就容易出现这种问题
    shzx1994529
        28
    shzx1994529  
       2021-04-19 11:59:16 +08:00
    @GzhiYi 是的,估计是被 purge 掉了,我就被坑过
    LeeReamond
        29
    LeeReamond  
    OP
       2021-04-19 13:42:05 +08:00 via Android
    @shzx1994529 后面修改了 purge 后问题已经解决
    @doco 不太现实,vue 前端组件框架我用过三个,描述能力和可定制性都不怎么样,尤其当设计本身稀烂的时候,你去 codepen 搜登录界面就能看到所有用 vuetify 做出来一个赛一个的土,就没有一个能拿得出手的。。所以你往往需要自己封装组件,然而往往又不能自己封装所有组件,所以两者都要
    ciddechan
        30
    ciddechan  
       2021-04-19 17:05:06 +08:00
    reset.css
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2764 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 12:18 · PVG 20:18 · LAX 05:18 · JFK 08:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.