深入Vue3+TypeScript技术栈-coderwhy大神新课

 

 

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 的字符串。