Vue打包
accttodo 12/31/2023 前端Vue
目录
# vue-cli3/cli4
项目打包（webpack）配置文件为项目根路径下创建的vue.config.js文件。
# 一、配置打包文件目录
module.exports = {
// 静态资源访问路径 （默认/，打包后会白屏）
publicPath: './',
// 打包后文件的目录 （默认为dist）
outputDir: 'dist',
// 静态资源(js、css、img、fonts)目录 （默认为''，没有单独目录，在根目录中）
assetsDir: 'static',
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 二、 配置本地开发跨域
使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：
module.exports = {
devServer: {
// 自动启动浏览器
open: false,
// 主机IP
host: '0.0.0.0',
// 端口号
port: 6060,
// 热更新
hotOnly: false,
// 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
overlay: {
warnings: false,
errors: true
},
// 代理
proxy: {
//配置跨域
'/api': {
// 接口的域名
target: 'https://www.test.com',
// 是否启用 websockets
ws: true,
// 开启代理，在本地创建一个虚拟服务端
changOrigin: true,
// 路径复写
pathRewrite: {
'^/api': '/'
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 三、配置引用路径别名
使用vue-cli开发项目，最大特色是组件化。组件中频繁引用其他组件或插件，可以把一些常用的路径定义成简短的名字，方便开发中使用。
// 加载path模块
const path = require('path')
// 定义resolve方法，把相对路径转换成绝对路径
const resolve = dir => path.join(__dirname, dir)
module.exports = {
//
chainWebpack: config => {
// 添加路径别名
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
配置完成后，我们在项目中可以这样写路径
//之前这么写
import Home from '../views/Home.vue'
//配置alias别名后
import Home from 'views/Home.vue'
//或
import Home from '@/views/Home.vue'
1
2
3
4
5
6
7
2
3
4
5
6
7
# 四、去除生产环境sourceMap
vue项目打包之后js文件夹中，会自动生成一些sourceMap文件，占用相当一部分空间。sourceMap文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了sourceMap就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
生产环境是不需要sourceMap的，如下配置可以去除
module.exports = {
//去除生产环境的
productionSourceMap : false,
}
1
2
3
4
2
3
4
# 五、去除console.log打印以及注释
下载插件
npm install uglifyjs-webpack-plugin --save-dev
1
配置插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
configureWebpack: config => {
const plugins = [];
if (isProduction) {
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']//移除console
}
}
})
)
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
结论：重新打包，dist体积减少并不大。因为congsole.log()以及注释并不会占用太多体积（也就10-30kb） ———————————————— 版权声明：本文为CSDN博主「xingyunwei1」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/xingyunwei1/article/details/120320917