vue-cli4的配置vue.config.js
一、配置多环境变量1、package.json 里的 scripts 配置项中添加--mode xxx 来选择不同环境"scripts": {"dev": "vue-cli-service serve","build:prod": "vue-cli-service build --mode production","build:stage": "vue-cli-service build --mo
一、配置多环境变量
1、package.json 里的 scripts 配置项中添加--mode xxx 来选择不同环境
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build --mode production",
"build:stage": "vue-cli-service build --mode staging",
}2、在项目根目录中新建.env.development, .env.production, .env.staging 三个文件
3、三个文件说明
- .env.development 开发环境
- .env.staging 测试环境
- .env.production 生产环境
ENV = 'development'
VUE_APP_API = 'http://localhost:8080'4、文件中引用变量
process.env.VUE_APP_API二、vue.config.js基础配置
'use strict'
module.exports = {
publicPath: './', //基本路径
outputDir: 'dist', //构建时的输出目录
assetsDir: 'static',//放置静态资源的目录
indexPath: 'index.html',//html 的输出路径
filenameHashing: true,//文件名哈希值
lintOnSave: true,//是否在保存的时候使用 `eslint-loader` 进行检查。
//组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
//template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
//runtime-only：将template在打包的时候，就已经编译为render函数
//runtime-compiler：在运行的时候才去编译template
runtimeCompiler: false,
transpileDependencies: [],//babel-loader 默认会跳过 node_modules 依赖。
productionSourceMap: false,//是否为生产环境构建生成 source map？
//调整内部的 webpack 配置
configureWebpack:: () => {},
chainWebpack: () => {},
// 配置 webpack-dev-server 行为。
devServer: {
open: true, //编译后默认打开浏览器
host: '0.0.0.0', //域名
port: 8080, // 端口
https: false, //是否https
//显示警告和错误
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://asoyy.xyz',
changeOrigin: true, //是否跨域
ws: false, //是否支持websocket
secure: false, //如果是https接口，需要配置这个参数
pathRewrite: {
'^/api': ''
}
}
}
}
}
三、添加别名alias
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set("vue$", "vue/dist/vue.esm.js")
.set("@", resolve("src"))
.set("@assets", resolve("src/assets"))
.set("@components", resolve("src/components"))
.set("@views", resolve("src/views"))
.set("@router", resolve("src/router"))
.set("@store", resolve("src/store"));
}
};四、配置雪碧图插件
1、安装依赖
npm i -D webpack-spritesmith2、在vue.config.js中添加配置
const path = require('path');
const SpritesmithPlugin = require('webpack-spritesmith');
const templateFunction = function(data) {
var shared = ".icon { display: inline-block; vertical-align: middle; background-image: url(I) }".replace(
"I",
data.sprites[0].image
);
var perSprite = data.sprites
.map(function(sprite) {
return ".icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }"
.replace("N", sprite.name)
.replace("W", sprite.width)
.replace("H", sprite.height)
.replace("X", sprite.offset_x)
.replace("Y", sprite.offset_y);
})
.join("\n");
return shared + "\n" + perSprite;
};
module.exports = {
chainWebpack: config => {
// 将小图标拼接成雪碧图
config.plugin("webpack-spritesmith").use(Spritesmith, [
{
src: {
cwd: "./src/assets/images/icon/",
glob: "*.png"
},
target: {
image: "./src/assets/images/sprite/sprite.png",
css: [
[
path.resolve(__dirname, "./src/assets/scss/icon/_sprite.scss"),
{
// 引用自己的模板
format: "function_based_template"
}
]
]
},
apiOptions: {
cssImageRef: "../../images/sprite/sprite.png"
},
customTemplates: {
function_based_template: templateFunction
},
spritesmithOptions: {
algorithm: "binary-tree",
padding: 10
}
}
]);
}
}
3、部分配置参数说明
- src 配置创建雪碧图的源文件
– cwd 要创建雪碧图的源文件夹
– glob 要创建雪碧图的源文件类型
- target 配置生成的雪碧图文件
– img 生成的雪碧图路径和文件名
– css 引用生成的雪碧图的样式文件的路径和模板等配置
- apiOptions 可选，配置引用生成的雪碧图的一些细节
– cssImageRef 配置在样式文件中引用雪碧图的路径
customTemplates 可选，配置生成样式文件的样式模板
spritesmithOptions 可选， spritesmith的配置。
– algorithm 配置生成雪碧图的算法。比如设为“binary-tree”，则雪碧图看起来正正方方，还可以设为top-down、left-right、diagonal、alt-diagonal，不同值之间拼接小图标的方式不同，因此最终的雪碧图形状不同。
– padding 配置雪碧图中小图标之间的间距，可根据需要设置。
五、去除多余的CSS样式
谨慎使用，或者建议不要使用，容易造成样式丢失
1、安装依赖 purgecss-webpack-plugin
npm i --save-dev glob-all purgecss-webpack-plugin path2、在vue.config.js中配置
const path = require("path");
const PurgecssPlugin = require("purgecss-webpack-plugin");
const glob = require("glob-all");
configureWebpack: {
plugins: [
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, "./src/index.html"),
path.join(__dirname, "./**/*.vue"),
path.join(__dirname, "./src/**/*.js")
])
})
]
},六、去除console.log
1、安装依赖 babel-plugin-transform-remove-console
npm i -D babel-plugin-transform-remove-console2、在babel.config.js 中配置
const plugins = [];
if (process.env.NODE_ENV === 'production') {
plugins.push('transform-remove-console');
}
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins
};七、使用splitChunks 单独打包第三方模块
module.exports = {
configureWebpack: config => {
if ('production' === process.env.NODE_ENV) {
config.optimization = {
splitChunks: {
cacheGroups: {
common: {
name: "chunk-common",
chunks: "initial",
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 1,
reuseExistingChunk: true,
enforce: true
},
vendors: {
name: "chunk-vendors",
test: /[\\/]node_modules[\\/]/,
chunks: "initial",
priority: 2,
reuseExistingChunk: true,
enforce: true
},
elementUI: {
name: "chunk-elementui",
test: /[\\/]node_modules[\\/]element-ui[\\/]/,
chunks: "all",
priority: 3,
reuseExistingChunk: true,
enforce: true
}
}
}
};
}
},
chainWebpack: config => {
if ('production' === process.env.NODE_ENV) {
config.optimization.delete("splitChunks");
}
return config;
}
};八、开启GZIP压缩
参考https://blog.csdn.net/baidu_30891377/article/details/106567599
九、配置scss全局变量
1、assets/scss 目录下创建 _variable.scss样式文件
2、在vue.config.js中添加配置
module.exports = {
css: {
loaderOptions: {
sass: {
prependData:`@import "./src/assets/scss/_variable";`
}
}
}
}
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献2条内容
所有评论(0)