vue 本地运行和打包部署后页面布局效果不一致的原因
原因:style 没有添加上;同一个盒子多次添加style(或者说和本地添加的style的顺序反了)
解决方式 :
第一个原因:main.js 文件中 import 引入文件先后顺序问题
import Vue from 'vue' import Print from 'vue-print-nb' import Cookies from 'js-cookie' import Element from 'element-ui' import './assets/styles/element-variables.scss' import '@/assets/styles/index.scss' // global css import '@/assets/styles/biaogan.scss' // biaogan css import permission from './directive/permission' import './assets/icons' // icon import './permission' // permission control import { getDicts } from "@/api/system/dict/data"; import { getConfigKey } from "@/api/system/config"; import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, download, handleTree } from "@/utils/biaogan"; import Pagination from "@/components/Pagination"; // 自定义表格工具扩展 import RightToolbar from "@/components/RightToolbar" import dataV from '@jiaminghi/data-view' import App from './App' import store from './store' import router from './router'
第二个原因: style 添加 scoped
<style scoped>
第三个原因: 前端代码错误,排查方式 本地代码和部署后的代码对比style。
术到极致,几近于道。
有道无术,可以求术;
有术无道,止于术矣。