首页 > 其他分享 >vue 本地运行和打包部署后页面布局效果不一致的原因

vue 本地运行和打包部署后页面布局效果不一致的原因

时间:2022-12-06 09:46:36浏览次数:36  
标签:styles style vue assets permission import 打包 页面

原因: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。

 

标签:styles,style,vue,assets,permission,import,打包,页面
From: https://www.cnblogs.com/zhangzaizz/p/16954303.html

相关文章

  • Vue项目部署后,刷新提示404
    本文来自博客园,作者:Carver-听风,转载请注明原文链接:https://www.cnblogs.com/carver/articles/16633191.html一、遇到的问题Vue项目打包部署到线上后,刷新页面会提示404......
  • Avue记(一)
    (1)Avueoption可直接调用组件component属性--子组件接收参为str{label:'模板内容',prop:'content',type:'textarea',......
  • 微信小程序写入缓存再页面跳转,部分机型异常处理
    先看下发现异常的代码:uni.setStorage({ key:"tmp_registerPageInfo", data:_registerPageInfo})uni.navigateTo({ url:"/attestationPackage/pages/bankCard/mai......
  • Vue.js:v-charts根据E-charts修改样式
    以饼状图为例子:首先importimportVeRingfrom'v-charts/lib/ring'在<template>加上<ve-ring><ve-ringstyle="background:#F9F9F9":data="chartDataRing":sett......
  • Vue的MVVM模型
    MVVM模型            1.M:模型(Model):data中的数据            2.V:视图(View):模板代码        ......
  • Vue之el与data的两种写法
    data与el的2种写法          1.el有2种写法                  (1).newVue时候配置el属性。     ......
  • Vue数据绑定
    Vue中有2种数据绑定的方式:          1.单向绑定(v-bind):数据只能从data流向页面。          2.双向绑定(v-model):数据不仅能......
  • vue3 webstorm 快捷新建组建模板
          <template><h1>${COMPONENT_NAME}</h1></template><scriptlang="ts"setup>import{reactive}from'vue';import{useRouter}from"vue......
  • mvn打包的时候报错No compiler is provided in this environment. Perhaps you are ru
    前戏错误原因​​mvn​​打包需要​​jdk​​的环境,而它自己没有找到​​jdk​​的配置目录,所以就报错了解决方案:1.新增环境变量:​​JAVA_HOME=​C:\ProgramFiles\Java\jdk......
  • Vue3 setup如何使用this.$xxx全局变量
    在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量,然后通过this.$xxx来获取全局变量。但是在vue3中,这种方法显然不行了。因为vue3中在setup里面我们是......