const path = require('path')
module.exports = {
publicPath: publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': './'
outputDir: 'zjjc', //输出文件目录
assetsDir: 'assets', //放置生成的静态资源
indexPath: '', //指定生成的 的输出路径 (相对于 outputDir)
lintOnSave: false, //eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
runtimeCompiler: true, //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
productionSourceMap: false, // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
devServer: {
https: false,
open: true, //配置自动启动浏览器
host: 'localhost',
port: 8080,
proxy: {
'/zj-server/': {
target:'http://172.6.4.11:8010', //开发环境
changeOrigin: true, //是否开启代理,
},
}
},
configureWebpack: config => { //webpack配置
const baseConfig = {
resolve: {
alias: {
'@assets': resolve('src/assets') //别名
}
},
}
return { ...baseConfig }
},
filenameHashing:false //去掉文件名中的hash
//多页面应用
pages:{
//1对象模式（与字符串模式互斥）
index: {
// page 的入口
entry: 'src/index/',
// 模板来源
template: 'public/',
// 在 dist/ 的输出
filename: '',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= %></title>
title: 'Index Page',
//chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件，也就是编译完后html中引入的js文件（webpack打包入口）
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
//2字符串模式(与对象模式互斥)
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/`
// 并且如果找不到的话，就回退到 `public/`。
// 输出文件名会被推导为 ``。
subpage: 'src/subpage/'
}
//vuecli的webpack配置项修改
//chaiwebpack对应api地址:/Yatoo2018/webpack-chain/tree/zh-cmn-Hans
chainWebpack: config => {
//不生成(不推荐性能不好,且不能在现代浏览器运行)
config.plugins.delete('html')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
//限制内联文件加载大小，减少http请求数量
config.module.rule('images').use('url-loader').loader('url-loader')
.top(option=>Object.assign(options,{limit:10240})
//css自动导入(oneOf唯一匹配 执行效率高)
const types = ['vue-modules','vue','normal-modules','normal']
types.forEach(type=>addStyleResource(config.module.rule('stylus').oneOf(type))
//替换loader规则
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule.use('vue-svg-loader').loader('vue-svg-loader')
//cache-loader：缓存编译。文件会缓存在node/modules/.cache中 遇到解决不了的编译问题可以删除该目录试试
//thread-loader:多进程转换语法（主要用于资源过大打包使用-目前无使用场景占时只做了解）
//修改插件选项
//args[{
title:' name属性',
templateParameters:[Function:templateParameters], //模板函数
template:'对应html文件本地地址'
}]
config.plugin('html').tap(args=>args)
},
//直接合并到最初的webpack配置
configureWebpack:{
plugins:[
new MyAwesomeWebpackPlugin()
]
},
css: {
extract: process.env.NODE_ENV === 'production'
}
};
function addStyleResource(rule){
rule.use('style-resource').loader('style-resources-loader').option({
patterns:[
path.resolve(__dirname,'./src/style/')
]
})
}