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

[Yokin]

初级前端,代码已写好了,部署的时候遇到几个问题,目前网上的资料清一色 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)上线部署的教程有大佬分享一下吗?

求大佬解答,谢谢

[InternetExplorer]

不要直接用浏览器开文件啊喂！
可以用 serve 开：serve -s dist
serve 用 npm install -g serve 装
用 serve 之前先把你的 publicPath 改回去

[zhuweiyou]

楼上说得对 serve

[Yokin]

@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]

@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]

localhost:5000

[renmu123]

文档上我记得有写怎么部署，Nginx 的话好像要改个 rewrite

[kanezeng]

不是都 vuecli 了么？不用直接调 npm 了吧？ vue serve 不行么？

[zhuweiyou]

@Yokin 如果你在 dist 目录只要 serve -s .
你在外面才是 serve -s dist

[Yokin]

@zhuweiyou 我按照这种方式可以预览了,但是还有一个问题就是样式错乱的问题,elementUI 有的样式错乱比如表单样式,布局样式,图标无法显示

[Yokin]

@kanezeng 可以预览了,但是还有一个问题就是样式错乱的问题,elementUI 有的样式错乱比如表单样式,布局样式,图标无法显示

[suzic]

样式丢失的问题看下这个，希望对你有帮助

https://github.com/HaruhiFanClub/guide-h5/commit/937789371361385236aeac299efe821427a1a45a

[Yokin]

@suzic 这个配置 vue-config.js 只是加了一个 parallel: false,我加上后本地预览还是样式错乱。不能解决问题。。

[darknoll]

你把 F12 调出来看看 css 文件加载了没啊

[Yokin]

@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]

@Yokin 艹，build 后的文件上引入，这不是在坑自己吗？