Vue3知识点
1、vue.config.js配置
创建vue.config.js
vue.config.js
是一个可选的配置文件,如果项目的 (和 package.json
同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service
自动加载。
这个文件应该导出一个包含了选项的对象:
// vue.config.js
module.exports = {
// 选项...
}
配置选项
publicPath
- Type:
string
- Default:
‘/‘
这个值也可以被设置为空字符串 (‘‘) 或是相对路径 (‘./‘),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。
// 这里的webpack配置会和公共的webpack.config.js进行合并
module.exports = {
// 执行 npm run build 统一配置文件路径(本地访问dist/index.html需‘./‘)
publicPath: ‘./‘,
}
outputDir
- Type:
string
- Default:
‘dist‘
当运行vue-cli-service build
时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入--no-clean
可关闭该行为)。
outputDir:‘dist‘, // 打包文件输出目录, 默认打包到dist文件下
assetsDir
- Type:
string
- Default:
‘‘
放置生成的静态资源 (js、css、img、fonts) 的 (相对于outputDir
的) 目录。
assetsDir:‘static‘, // 放置静态资源
pages
- Type:
Object
- Default:
undefined
在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象,对象的 key 是入口的名字,value 是: - 一个指定了
entry
,template
,filename
,title
和chunks
的对象 (除了entry
之外都是可选的); - 或一个指定其
entry
的字符串。