vue 配置【详解】 vue.config.js （含 webpack 配置）

常用配置

完整配置

使用 vue-cli 3.x 以上的脚手架创建的 vue 项目不再有 build文件夹，若需要进行相关配置，需在项目目录下新建文件 vue.config.js

常用配置

// 后端服务器地址
let url = 'http://localhost:8888'
module.exports = {publicPath: './',  // 【必要】静态文件使用相对路径outputDir: "./dist", //打包后的文件夹名字及路径devServer: {  // 开发环境跨域情况的代理配置proxy: {// 【必要】访问自己搭建的后端服务器'/api': {target: url,changOrigin: true,ws: true,secure: false,pathRewrite: {'^/api': '/'}},// 【范例】访问百度地图的API// vue文件中使用方法  this.$http.get("/baiduMapAPI/place/v2/search"// 最终实际访问的接口为  http://api.map.baidu.com/place/v2/search// 遇到以/baiduMapAPI开头的接口便使用此代理'/baiduMapAPI': {// 实际访问的服务器地址target: 'http://api.map.baidu.com',//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端和服务端进行数据的交互就不会有跨域问题changOrigin: true,ws: true,  // 是否启用websocketssecure: false, // 使用的是http协议则设置为false，https协议则设置为true// 将接口中的/baiduMapAPI去掉（必要）pathRewrite: {'^/baiduMapAPI': ''}},}}
}

完整配置

const path = require("path");
const resolve = dir => path.join(__dirname, dir);
//用于生产环境去除多余的css
const PurgecssPlugin = require("purgecss-webpack-plugin");
//全局文件路径
const glob = require("glob-all");
//压缩代码并去掉console
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
//代码打包zip
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {// 废弃baseUrl  一般运维会配置好的publicPath: process.env.NODE_ENV === "production" ? "/configtest/" : "/",//打包的输出目录outputDir: "dist/configtest",//保存时是否校验lintOnSave: true,//如果文件等设置pages: {index: {entry: "src/main.js",template: "public/index.html",filename: "index.html"}},//静态资源打包路径assetsDir: "static",//默认false 可以加快打包productionSourceMap: false,//打包后的启动文件indexPath: "congfigtest.html",//打包文件是否使用hashfilenameHashing: true,runtimeCompiler: false,transpileDependencies: [],//打包的css路径及命名css: {modules: false,//vue 文件中修改css 不生效 注释掉  extract:trueextract: {filename: "style/[name].[hash:8].css",chunkFilename: "style/[name].[hash:8].css"},sourceMap: false,loaderOptions: {css: {},less: {// 向全局less样式传入共享的全局变量// data: `@import "~assets/less/variables.less";$src: "${process.env.VUE_APP_SRC}";`},// postcss 设置postcss: {plugins: [require("postcss-px-to-viewport")({viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vwselectorBlackList: [".ignore", ".hairlines"], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值mediaQuery: false // 允许在媒体查询中转换`px`})]}}},//webpack 链式配置   默认已经配置好了  node_moudles/@vuechainWebpack: config => {// 修复HMRconfig.resolve.symlinks(true);// 修复Lazy loading routes  按需加载的问题，如果没有配置按需加载不需要写，会报错// config.plugin("html").tap(args => {//   args[0].chunksSortMode = "none";//   return args;// });//添加别名config.resolve.alias.set("@", resolve("src")).set("assets", resolve("src/assets")).set("components", resolve("src/components")).set("layout", resolve("src/layout")).set("base", resolve("src/base")).set("static", resolve("src/static"));// 压缩图片config.module.rule("images").use("image-webpack-loader").loader("image-webpack-loader").options({mozjpeg: { progressive: true, quality: 65 },optipng: { enabled: false },pngquant: { quality: "65-90", speed: 4 },gifsicle: { interlaced: false },webp: { quality: 75 }});},//webpack 配置configureWebpack: config => {const plugins = [];//去掉不用的css 多余的cssplugins.push(new PurgecssPlugin({paths: glob.sync([path.join(__dirname, "./**/*.vue")]),extractors: [{extractor: class Extractor {static extract(content) {const validSection = content.replace(/<style([\s\S]*?)<\/style>+/gim,"");return validSection.match(/[A-Za-z0-9-_:/]+/g) || [];}},extensions: ["html", "vue"]}],whitelist: ["html", "body"],whitelistPatterns: [/el-.*/],whitelistPatternsChildren: [/^token/, /^pre/, /^code/]}));//启用代码压缩plugins.push(new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false,drop_console: true,drop_debugger: false,pure_funcs: ["console.log"] //移除console}},sourceMap: false,parallel: true})),//代码压缩打包plugins.push(new CompressionWebpackPlugin({filename: "[path].gz[query]",algorithm: "gzip",test: productionGzipExtensions,threshold: 10240,minRatio: 0.8}));config.plugins = [...config.plugins, ...plugins];},parallel: require("os").cpus().length > 1,pluginOptions: {},pwa: {},//设置代理devServer: {port: 8080,host: "0.0.0.0",https: false,open: true,openPage: "about",hot: true,disableHostCheck: true,proxy: {"/api": {target: "https://cdn.awenliang.cn",ws: true,changeOrigin: true},"/foo": {target: "https://cdn.awenliang.cn",ws: true,changeOrigin: true}}}
};

vue 配置【详解】 vue.config.js （含 webpack 配置）相关推荐

SAP PP配置详解之二：BOM的配置
1.定义BOM修正参数功能说明配置路径 IMG>生产>基础数据>物料清单>物料单控制数据>定义修正参数(OS27) 业务示例配置步骤 1)双击修正参数 2)按业务要 ...
【WebService】wsdl配置详解以及使用注解修改wsdl配置
本文转自: https://blog.csdn.net/eson_15/article/details/52051801 (倪升武的博客) 对大佬的膜拜! 前面分析了一下关于ws的基本知识,我们知 ...
Linux配置 DNS and BIND服务配置详解--缓存服务器配置正反向解析配置
一.DNS简介一.DNS简介 DNS是计算机域名系统 (Domain Name System 或Domain Name Service) 的缩写,它是由域名解析器和域名服务器组成的.域名服务器是 ...
nginx反向代理模块配置详解_nginx反向代理原理及配置详解
nginx概述 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器:nginx可以作为一个HTTP服务器进行网站的发布处理,另外 ...
vue 声明周期函数_【Vue】详解Vue生命周期
Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期在beforeCreate和created之 ...
【Vue】详解Vue生命周期
Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期在beforeCreate和created之 ...
Vue学习 — 详解Vue生命周期
目录一.前言二.生命周期 1.beforeCreat / created (1).beforeCreat: (2).created: 2.eforeMount / mounted (1).befo ...
Maven安装与配置详解、多镜像节点的配置
下载 Maven是Apache下面的一个项目,官网下载地址: https://maven.apache.org/download.cgi 历史版本下载地址: https://archive.apach ...
MySQL之——CentOS下my.cnf 配置日志类型及文件配置详解(我本人服务器上的配置，亲测可用)
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/50827148 mysql有以下几种日志: 错误日志: log-err 查询日 ...
SAP SD配置详解之一：销售分销组织结构配置
1.定义销售组织功能说明 • 销售组织是一个从法律上负责产品责任和追索权的业务单位,且设有地址. • 可以在销售组织内定义自己的主数据,销售组织可以有其自己的客户和物料主数据,以及自己的条件和定价. ...

vue 配置【详解】 vue.config.js （含 webpack 配置）

常用配置

完整配置

vue 配置【详解】 vue.config.js （含 webpack 配置）相关推荐

最新文章

热门文章

vue 配置【详解】 vue.config.js （ 含 webpack 配置 ）

常用配置

完整配置

vue 配置【详解】 vue.config.js （ 含 webpack 配置 ）相关推荐

最新文章

热门文章

vue 配置【详解】 vue.config.js （含 webpack 配置）

vue 配置【详解】 vue.config.js （含 webpack 配置）相关推荐