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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1360 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

求大佬解答,谢谢

CSS

大佬

elementui

Vue

15 条回复 • 2021-03-05 15:06:25 +08:00

InternetExplorer

2021-03-04 19:40:37 +08:00

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

zhuweiyou

2021-03-04 19:48:23 +08:00

楼上说得对 serve

Yokin

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

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

2021-03-04 19:52:22 +08:00

localhost:5000

renmu123

2021-03-04 19:55:06 +08:00 via Android

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

kanezeng

2021-03-04 19:56:52 +08:00

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

zhuweiyou

2021-03-04 19:57:03 +08:00

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

Yokin

2021-03-04 20:09:39 +08:00

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

Yokin

2021-03-04 20:09:57 +08:00

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

suzic

2021-03-04 20:19:41 +08:00 via Android

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

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

Yokin

2021-03-04 20:32:24 +08:00

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

darknoll

2021-03-04 20:42:25 +08:00

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

Yokin

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

2021-03-05 15:06:25 +08:00

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