1、打开index.html一片空白

参考：链接: link.
修改build对象里的assetsPublicPath为’./’

assetsPublicPath: './'

2、ElementUI样式丢失

参考：链接: link.
这里尝试完前三种：

1.main.js样式引入顺序问题

调整了import的顺序（可能是被第三方组件样式覆盖了，router放在最后引入，就可以实现组件样式在第三方样式之后渲染）

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/css/reset.css'
import myBread from '@/components/cuscom/myBread.vue'
import router from './router'
import http from '@/plugins/http.js'
import moment from 'moment'

2.注释/build/webpack.prod.conf.js文件的代码

new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),

因为webpack编译会发生css去重的问题，在打包的过程时会过滤掉重复的css类或样式代码，虽然有时候不重复的也会被过滤掉

3.添加使用范围样式

scoped是H5的新特性，它限制样式只适用于当前组件，避免组件间的样式干扰。

将所有<style>

修改为

<style scoped>

以上三步完成以后，页面能展示部分样式，效果如下：

图片:

可以看出图标样式不能正常显示
控制台报错情况如下：
Failed to load resource: net::ERR_FILE_NOT_FOUND

4.显示图标样式

webpack utils.js 修改：（build目录下utils.js）
添加 publicPath: ‘…/…/’

if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../'})} else {return ['vue-style-loader'].concat(loaders)}

终于，所有样式都正常了

部署项目的问题（一）—— vue工程打包上线样式错乱问题相关推荐

vue工程打包上线样式错乱问题 - bug解决（4种）
vue工程打包上线样式错乱问题 - bug总结(4种) 项目开发完成后,执行npm run build,进行打包,将打包完成的dist文件部署在服务器.配置好域名解析,就可以实现工程上线. 上线后,有 ...
vue项目打包后样式错乱
问题在开发的过程中,我们喜欢用里面写某个组件的独有样式.然而项目在打包之后运行在服务器中时,我们会发现scoped并没有生效.这时候有可能会出现样式错乱的情况. 问题产生的原因 vue的项目在打包后 ...
【Vue工程】001-Vite 创建 Vue-TypeScript 项目
[Vue工程]001-Vite 创建 Vue-Ts 项目文章目录 [Vue工程]001-Vite 创建 Vue-Ts 项目一.环境二.创建项目 1.pnpm 创建 Vite 项目 2.设置项目名 ...
Vue工程利用HBuild X打包APP打开一片空白的解决方式
Vue工程利用HBuild X打包成APP时有时会出现一片空白的情况,这是由于Vue工程打包出来的静态文件路径出现问题造成的. 解决方式: 在工程下创建vue.config.js文件在文件中写入: ...
搭建一个企业级的Vue工程！
虽然Vue CLI可以快速生成项目,但是对于企业需要扩展特定的功能变得极其复杂,并不适合定制化的开发,所以企业中通常是开发人员自己通过构建工具去配置打包项目.下面演示Vue工程的配置代码. 下面是项目 ...
vue项目打包部署注意点 + 宝塔面板几步部署项目
1.vue项目打包 1.1 终端运行打包命令在编辑器的终端运行vue项目打包命令 yarn run build 打包成功如下: 这时我们可以看到项目目录多出来一个dist文件夹,记住它,后面部署就靠 ...
Vue项目部署及使用WebStorm开发Vue
Vue项目部署及使用WebStorm开发Vue Vue项目部署搭建Vue环境新建Vue项目使用WebStorm开发Vue WebStorm相关配置配置路由全局页面App.vue 全局引入组件 ...
linux运行dock打包的镜像,Linux部署之Docker方式部署项目
Linux部署之Docker方式部署项目 1. 使用Docker对前端vue项目进行部署 1.1 环境准备服务器或者虚拟机上先安装好Nginx和相关配置 docker pull nginx 拉去最新 ...
vue菜鸟从业记：完成项目最后一公里之真机测试和打包上线
最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说"我也不知道我的接口文档写的对不对,我们验证一下吧?我也不 ...

部署项目的问题（一）—— vue工程打包上线样式错乱问题

1、打开index.html一片空白

2、ElementUI样式丢失

1.main.js样式引入顺序问题

2.注释/build/webpack.prod.conf.js文件的代码

3.添加使用范围样式

4.显示图标样式

部署项目的问题（一）—— vue工程打包上线样式错乱问题相关推荐

最新文章

热门文章

部署项目的问题（一）—— vue工程打包上线样式错乱问题

1、 打开index.html一片空白

2、ElementUI样式丢失

1.main.js样式引入顺序问题

2.注释/build/webpack.prod.conf.js文件的代码

3.添加使用范围样式

4.显示图标样式

部署项目的问题（一）—— vue工程打包上线样式错乱问题相关推荐

最新文章

热门文章

1、打开index.html一片空白