前段时间,对部门的个别项目进行
Vue3.0+ts
框架的迁移,刚开始研究的时候也是踩坑特别多,尤其我们的项目还有些特殊的webpack
配置,所以,研究vue.config.js
的配置的时候也是查阅了各种资料文档,最终,完成了项目webpack
的特殊配置。
今天分享一下,我们项目当中的一些webpack
配置,希望能给大家有所启发;只要配置多了,你就会发现其实所有的配置的都是相似的,尤其像插件的配置,都是十分相似的。
我们现在开始进入今天的主题啦~~
1 介绍
之前,我有提到过,当然大家肯定也都知道,Vue3.0不在有webpack.config.js
的配置;但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack
, 这个时候,在Vue3.0的项目当中,我们就需要在根目录创建vue.config.js
去完成webpack
的一些特殊配置,默认它会被 @vue/cli-service
自动加载。
此刻,你需要创建vue.config.js
文件。
查看默认的webpack配置
Vue CLI 官方文档:
vue-cli-service
暴露了inspect
命令用于审查解析好的webpack
配置。那个全局的 vue 可执行程序同样提供了inspect
命令,这个命令只是简单的把vue-cli-service``inspect
代理到了你的项目中。
被抽象化的webpack
,我们要想去理解它默认的一些配置的话是比较困难的,所以我们可以通过指令去查看。
该指令会将webpack
的配置输出到output.js
文件,这样方便去查看。
vue inspect > output.js
vue.config.js文件
这个文件导出了一个包含了选项的对象:
module.exports = {
// 选项...
}
接下来,详细介绍一些选项及配置:
2 基本配置
module.exports = {
productionSourceMap: false,
publicPath: './',
outputDir: 'dist',
assetsDir: 'assets',
devServer: {
port: 8090,
host: '0.0.0.0',
https: false,
open: true
},
// 其他配置
...
-
productionSourceMap:生产环境是否要生成
sourceMap
-
publicPath:部署应用包时的基本 URL,用法和
webpack
本身的output.publicPath
一致- 可以通过三元运算去配置
dev
和prod
环境,publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : './'
- 可以通过三元运算去配置
-
outputDir:
build
时输出的文件目录 -
assetsDir: 放置静态文件夹目录
-
devServer: dev环境下,
webpack-dev-server
相关配置- port: 开发运行时的端口
- host: 开发运行时域名,设置成
'0.0.0.0'
,在同一个局域网下,如果你的项目在运行,同时可以通过你的http://ip:port/...访问你的项目
- https: 是否启用
https