第一步:vue安装压缩工具
cnpm install --save-dev compression-webpack-plugin@1.1.12
如果上面这句没能安装成功先安装下面这句,再安装上面那句命令
cnpm config set proxy http://username:password@ip:port
第二步:配置压缩的代码,在vue.config.js文件里配置,没有这个文件就在项目根目录下创建一个
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
publicPath: './',
assetsDir: 'static',
productionSourceMap: false,
configureWebpack: () => {// 这个是配置gzip压缩的
if (process.env.NODE_ENV === 'production') {
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, // 指定压缩文件
threshold: 10240, // 超过10kb的文件进行压缩
deleteOriginalAssets: true // 是否删除原文件
})]
}
}
},
devServer: {// 这个是配置跨域,可以不用写这个只需要上面的就行
proxy: {// 这个是配置跨域,可以不用写这个只需要上面的就行
'/api':{
target:'127.0.0.1',// 这个是配置跨域的域名
ws:true,
secure:false,
changeOrigin:true,
pathRewrite:{
'^/api':'/api'
}
}
}
}
}
配置好之后运行命令 npm run build 进行压缩文件
第三步:下载nginx官网地址如下,选择1.81版本的,其实其他版本也行,只是新版本比较好一点
http://nginx.org/en/download.html
第四步:解压nginx,并且配置对应的项目和解压命令
上面的图片是找到需要配置的文件,下面的图片是配置相对应的命令
解压的命令
gzip on;
gzip_static on;
gzip_comp_level 2;
第五步:启动nginx
然后输入下面的命令,启动nginx,或者双击上图的 nginx.exe这个绿色图标,也可以启动
nginx.exe -s reload
第六步:在浏览器输入 127.0.0.1就可以查看你打包的项目了