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

请教 VueCli4 打包部署的问题,求大佬解答,谢谢

  •  
  •   Yokin · 2021-03-04 18:50:43 +08:00 · 1537 次点击
    这是一个创建于 1121 天前的主题,其中的信息可能已经有所发展或是发生改变。
    初级前端,代码已写好了,部署的时候遇到几个问题,目前网上的资料清一色 vue-cli3,我们项目使用的是 vue-cli4.0,公司也没人给我指导..求大佬解答,谢谢

    (1)num run build 本地预览 打开 dist 的 index.html,起初空白报错,查资料后找到 vue.config.js 的 publicPath 更改成'./'后可以正常打开然后发现 elementUI 的 CSS 全部不正常了, 为啥 CSS 样式不正常?我们项目用的 elementUI,所有 vue 的 style 标签都加了 scoped 且 main.js 的引入 css 文件顺序也调整了(按照找资料的方法)
    (2)上线部署的教程有大佬分享一下吗?

    求大佬解答,谢谢
    15 条回复    2021-03-05 15:06:25 +08:00
    InternetExplorer
        1
    InternetExplorer  
       2021-03-04 19:40:37 +08:00
    不要直接用浏览器开文件啊喂!
    可以用 serve 开:serve -s dist
    serve 用 npm install -g serve 装
    用 serve 之前先把你的 publicPath 改回去
    zhuweiyou
        2
    zhuweiyou  
       2021-03-04 19:48:23 +08:00
    楼上说得对 serve
    Yokin
        3
    Yokin  
    OP
       2021-03-04 19:51:49 +08:00
    @InternetExplorer 大佬,我刚刚试了一下(1)把 vue-config.js 的 publicPath 改成'/'(2)npm run build (3)在 dist 目录 npm install -g serve (4)serve -s dist (5)报错 :404 The requested path could not be found 这是怎么回事呢?
    Yokin
        4
    Yokin  
    OP
       2021-03-04 19:52:05 +08:00
    @zhuweiyou 大佬,我刚刚试了一下(1)把 vue-config.js 的 publicPath 改成'/'(2)npm run build (3)在 dist 目录 npm install -g serve (4)serve -s dist (5)报错 :404 The requested path could not be found 这是怎么回事呢?
    Yokin
        5
    Yokin  
    OP
       2021-03-04 19:52:22 +08:00
    localhost:5000
    renmu123
        6
    renmu123  
       2021-03-04 19:55:06 +08:00 via Android
    文档上我记得有写怎么部署,Nginx 的话好像要改个 rewrite
    kanezeng
        7
    kanezeng  
       2021-03-04 19:56:52 +08:00
    不是都 vuecli 了么?不用直接调 npm 了吧? vue serve 不行么?
    zhuweiyou
        8
    zhuweiyou  
       2021-03-04 19:57:03 +08:00
    @Yokin 如果你在 dist 目录只要 serve -s .
    你在外面才是 serve -s dist
    Yokin
        9
    Yokin  
    OP
       2021-03-04 20:09:39 +08:00
    @zhuweiyou 我按照这种方式可以预览了,但是还有一个问题就是样式错乱的问题,elementUI 有的样式错乱比如表单样式,布局样式,图标无法显示
    Yokin
        10
    Yokin  
    OP
       2021-03-04 20:09:57 +08:00
    @kanezeng 可以预览了,但是还有一个问题就是样式错乱的问题,elementUI 有的样式错乱比如表单样式,布局样式,图标无法显示
    suzic
        11
    suzic  
       2021-03-04 20:19:41 +08:00 via Android
    Yokin
        12
    Yokin  
    OP
       2021-03-04 20:32:24 +08:00
    @suzic 这个配置 vue-config.js 只是加了一个 parallel: false,我加上后本地预览还是样式错乱。不能解决问题。。
    darknoll
        13
    darknoll  
       2021-03-04 20:42:25 +08:00
    你把 F12 调出来看看 css 文件加载了没啊
    Yokin
        14
    Yokin  
    OP
       2021-03-04 20:56:15 +08:00
    @darknoll 我在 build 后的 index.html 引入

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    后样式和图标就正常了,但还是又一些自定义样式如布局不正常这是怎么回事?
    iikebug
        15
    iikebug  
       2021-03-05 15:06:25 +08:00
    @Yokin 艹,build 后的文件上引入,这不是在坑自己吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2869 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 11:39 · PVG 19:39 · LAX 04:39 · JFK 07:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.