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。

 

posted @ 2022-12-06 09:32  张载zz  阅读(1783)  评论(0编辑  收藏  举报