vue打包上线部分css效果错乱,vue-cli2打包后css部分样式错乱

鼓捣半天,现在如下配置,能成功运行。还在查资料ing

build/utils.js

...

function generateLoaders (loader, loaderOptions) {

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

if (loader) {

loaders.push({

loader: loader + '-loader',

options: Object.assign({}, loaderOptions, {

sourceMap: options.sourceMap

})

})

}

// Extract CSS when that option is specified

// (which is the case during production build)

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

publicPath: '../../', // 解决css的字体图标无法找到的问题

fallback: 'vue-style-loader'

})

} else {

return ['vue-style-loader'].concat(loaders)

}

}

...

build/webpack.base.conf.js

'use strict'

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

var webpack = require('webpack')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

function resolve (dir) {

return path.join(__dirname, '..', dir)

}

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js',

},

plugins: [

new ExtractTextPlugin({filename: "main.css", allChunks: true}), //抽离成一个单独的css

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery",

"windows.jQuery": "jquery"

})

],

output: {

path: config.build.assetsRoot,

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? config.build.assetsPublicPath

: config.dev.assetsPublicPath

},

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

},

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

// options: {loaders:{

// css: ExtractTextPlugin.extract({

// use: 'css-loader',

// fallback: 'vue-style-loader'

// })

// }}

},

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('../src'), resolve('test')]

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('media/[name].[hash:7].[ext]')

}

},

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

}

}

]

},

node: {

// prevent webpack from injecting useless setImmediate polyfill because Vue

// source contains it (although only uses it if it's native).

setImmediate: false,

// prevent webpack from injecting mocks to Node native modules

// that does not make sense for the client

dgram: 'empty',

fs: 'empty',

net: 'empty',

tls: 'empty',

child_process: 'empty'

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql搜索标题及时间_mysql搜索标题,描述和多行标记

我有以下表格。入口表描述--------------------------------------------------------------------| Field | Type | Null | Key | Default | Extra |--------------------------------------------------------------------| id | int(11) unsigned | NO | PRI | NULL | auto_…

ajax让服务器崩溃,详解ajax的data参数错误导致页面崩溃

今天准备把选定表格的其中一行的数据通过ajax传给后端,但是网站确崩溃了。代码如下:$(.icon-edit).click(function (event) { 这是一个按钮o$(.icon-edit).index($(this))1;edit.style.displayblock;//console.log($(this),$(this).parent().parent());l…

linux 启动一个网站_在线试用 200 多种 Linux 和 Unix 操作系统

只要打开该网站,选择你需要的 Linux/Unix 发行版,然后开始试用!-- Sk(作者)不久前我们介绍过 OSBoxes ,该网站提供了一系列免费且开箱即用的 Linux 和 Unix 虚拟机。你可以在你的 Linux 系统中下载这些虚拟机并用 VirtualBox 或 V…

搭建微信令牌中控服务器,使用ThinkJs搭建微信中控服务的实现方法

本人前端渣渣一枚,这篇文章是第一次写,如果有硬核bug,请大佬们轻喷、指出... 另外,本文不涉及任何接口安全、参数校验之类的东西,默认对调用方无脑级的信任:joy: 目前自用的接口包括但不限于以下这些|--- 微信相关| |-…

小黑框如何连接mysql_珍藏版(cmd小黑框)数据库命令及操作

话不多说直接来,后续补充。查看数据库show databases;创建数据库create database 2018;使用数据库use 2018;查看数据库中的所有表show tables;删除数据库drop database 库名;create table student(id int(10) auto_increment primary key,name varchar(20) not null…

DS系列服务器硬盘扇区,硬盘基本知识(磁道、扇区、柱面、磁头数、簇、MBR、DBR)...

硬盘的DOS管理结构1.磁道,扇区,柱面和磁头数硬盘最基本的组成部分是由坚硬金属材料制成的涂以磁性介质的盘片,不同容量硬盘的盘片数不等。每个盘片有两面,都可记录信息。盘片被分成许多扇形的区域,每个区域叫一个扇区&…

arm ubuntu 编译boost_为arm linux 交叉编译boost 1.33.1

首先在arm linux环境上要有zlib1 解开boost压缩包, cd进入解压目录2 编译出bjam,并配置好,看手册页3 产生Makefile: ./configure "-sBUILDdebug release static/dynamic" --without-python4 更改Makefile:把文件头上的几个变量改成下面这样,我…

华为服务器sn号查询网站,linux 查询服务器sn

linux 查询服务器sn 内容精选换一换Linux云服务器变更规格时,可能会发生磁盘挂载失败的情况,因此,变更规格后,需检查磁盘挂载状态是否正常。本节操作介绍变更规格后检查磁盘挂载状态的操作步骤。以root用户登录云服务器。执行以下…

jdba访问mysql_mysql连接出现问题记录

解决:Caused by: com.mysql.cj.exceptions.InvalidConnectionAttributeException: The server time zone valu//报错信息Caused by: com.mysql.cj.exceptions.InvalidConnectionAttributeException: The server time zone value ‘‘ is unrecognized or represents…

mysql 存储引擎版本_mysql不同版本和存储引擎选型的验证

Mysql的版本和存储引擎较多,为了选择最适合业务使用的系统,需要进行一定的验证,本文描述mysql的验证过程和思路。主要涉及:Mysql的版本v Mariadbv Tokudbv Oracle具体的存储引擎v Myisamv Innodbv TokuDBv Maria如下是具体的思路M…

python制作表白神器_python制作exe可执行表白神器-Go语言中文社区

1、效果图2、程序源码import turtleimport time#writing txtturtle.hideturtle()turtle.penup()turtle.goto(130,50)# turtle.pendown()turtle.color("blue")turtle.write("亲爱的,给你画个东西",font ("Times",18,"bold"…

qtp连接mysql 无驱动_QTP连接MySQL

1、安装 Connector/ODBC2、查看数据源名称『控制面板』- 『管理工具』- 『数据源(ODBC)』-『添加』3、连接数据库Dim Conn,ConnString创建数据库实例Set ConnCreateObject("ADODB.Connection")连接字符串ConnString"Driver{Mysql ODBC 5.2w Driver};DATABASEmys…

python3如何安装selenium_Mac-Firefox浏览器+selenium+Python3环境安装

1.安装selenium安装命令:pip3 install selenium2.53.6如果之前已经安装过了,可以先卸载pip3 uninstall selenium使用selenium2.53.6版本是因为-selenium2的版本会更加稳定(切记注意版本号,很多问题都是由于版本不兼容导致的哦2.安装Firefox浏…

python保存模型的路径怎么写_使用python在MongoDB中保存机器学习(ML)和深度学习(DL)模型...

我们知道,当我们训练机器学习或深入学习模型时,我们必须保存训练过的模型,以便将来进行预测。现在的训练模型非常昂贵,所以如果我们能够保存它们并将其用于解决其他一些问题。例如,一个训练过的能够识别汽车的神经网络…

抓狐狸python_​用Python操作Kubernetes的Job

本文给出Python SDK操作Kubernetes Job的更多示例代码,以及相关解释。pip install kubernetes初始化from kubernetes.client import BatchV1Apifrom kubernetes.config import load_kube_configload_kube_config()batch BatchV1Api()load_kube_config 是从默认位置…

mysql8支持myISAM_mysql菜鸟手迹8--mysql存储引擎之MyISAM

MyISAM可以将表压缩为只读表来节省空间。使用myisampack工具来进行表压缩。MyISAM支持全文索引;一般使用instr()来替代。myisam在写的时候,会产生一个表级锁。myisam锁的时候使用一个lock命令,lock类型有write锁(只有当前线程可以做读写删操作…

mysql双机数据热备份_配置MySQL数据库双机热备份

1、mysql 数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题。还好 mysql 数据库提供了一种主从备份的机制,其实就是把主数据库的所有的数据同时写到备份数据库中。实现 mysql 数据库的热备份。  2、要想实现双机的热备首先要了解主从…

java token_Java实现基于token认证的方法示例

随着互联网的不断发展,技术的迭代也非常之快。我们的用户认证也从刚开始的用户名密码转变到基于cookie的session认证,然而到了今天,这种认证已经不能满足与我们的业务需求了(分布式,微服务)。我们采用了另外一种认证方式&#xff…

重置mysql+密码_MySQL重置root密码的几种方法(windows+Linux)

重置root密码的方法:windows系统下:1、停止mysql服务;2、新建文件init-root.txt,写上如下内容:update mysql.user set password password(‘newpwd‘) where user ‘root‘;flush privileges;保存;3、打开命令行&…

java 中导出word后压缩文件_Java批量导出word压缩后的zip文件案例

一、js代码,由于参数比较大所以利用form表单使用post导出function export_word(){var selectedRows $("#dg").datagrid("getSelections");if (selectedRows.length0) {showAlertWarning("请选择一条的信息...");return;}if (selecte…