详解vue中config下index.js的每一行默认配置
//vue cli官方地址: https://cli.vuejs.org/zh/config/
module.exports = {
//部署应用包时的基本 URL。
//Type: string,
//默认: '/'
publicPath: './',
//当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
//Type: string
//默认: 'dist'。不可修改
outputDir: 'dist',
//放置生成的静态资源 (js、css、img、fonts) 的目录。
//Type: string
//默认: ''
assetsDir: 'assets',
//指定生成的 index.html 的输出路径(相对于 outputDir)。也可以是一个绝对路径。
//Type: string
//默认index.html
indexPath: 'index.html',
//默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。
//Type: boolean
//默认: true
filenameHashing: 'false',
//在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象,象的 key 是入口的名字,value 是:一个指定了 entry, template, filename, title 和 chunks 的对象 (除了entry 之外都是可选的);或一个指定其 entry 的字符串。
//Type: Object
//默认: undefined
//pages:undefined,
//设置为 true 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。
//Type: boolean | 'error'
//Default: true
lintOnSave: true,
//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了
//Type: boolean
//Default: false
runtimeCompiler: false,
//默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来
//Type: Array<string | RegExp>
//Default: []
//************此处有坑,不要使用,使用后会找不到node_modules中的文件,导致ui框架等引入失败
//transpileDependencies:[],
//如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
//Type: boolean
//Default: true
productionSourceMap: true,
//设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
//需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
//Type: string
//Default: undefined
crossorigin: undefined,
//在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性。
//需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
//另外,当启用 SRI 时,preload resource hints 会被禁用,因为 Chrome 的一个 bug 会导致文件被下载两次
//Type: boolean
//Default: false
integrity: false,
// cors 相关 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
// corsUseCredentials: false,
// webpack 配置,键值对象时会合并配置,为方法时会改写配置
// https://cli.vuejs.org/guide/webpack.html#simple-configuration
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
},
// webpack 链接 API,用于生成和修改 webapck 配置
// https://github.com/mozilla-neutrino/webpack-chain
chainWebpack: (config) => {
// 因为是多页面,所以取消 chunks,每个页面只对应一个单独的 JS / CSS
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改它的选项...
return options
})
},
css: {
//Type: boolean
//Default: false
//默认情况下,只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 true 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。
modules: false,
//Type: boolean | Object
//Default: 生产环境下是 true,开发环境下是 false
extract: false,
//是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
//Type: boolean
//Default: false
sourceMap: false,
//向 CSS 相关的 loader 传递选项。例如/
//Type: Object
//Default: {}
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
}
},
},
devServer: {
host: "localhost",
port: 8081, // 端口号
https: false,
open: false, //配置自动启动浏览器
/* proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 */
//配置多个代理
proxy: {
"/ec-pcm": {
target: "http://test.leatc.cn:3980",
ws:true,
changeOrigin: true ,// 如果接口跨域,需要进行这个参数配置
pathRewrite:{//表示会重写上面的/ec-pcm
'^/ec-pcm':'/ec-pcm'
}
},
}
},
// 构建时开启多进程处理 babel 编译
//******* 第三方插件未使用
//parallel: require('os').cpus().length > 1,
// https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
//*******PWA插件未使用
//pwa: {},
// 第三方插件配置
pluginOptions: {}
}