package.js
"scripts": {
"serve": "vue-cli-service serve",
"build:pc": "vue-cli-service build pc",
"build:m": "vue-cli-service build m",
"lint": "eslint --fix --ext .js,.vue src"
},
vue.config.js
// 代码压缩
const TerserPlugin = require('terser-webpack-plugin')
// gzip压缩
const CompressionPlugin = require('compression-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
// var proEnv = require('./config/pro.env') // 生产环境
// var devEnv = require('./config/dev.env') // 本地环境
// 默认是本地环境
const env = process.env.NODE_ENV
let writeEnv = ''
if (env === 'production') { // 生产环境
writeEnv = require('./config/pro.env') // 生产环境
} else { // 本地环境
// 测试
writeEnv = require('./config/dev.env') // 本地环境
}
function resolve(dir) {
return path.join(__dirname, dir)
}
const HOST = '0.0.0.0'
const PORT = '8045'
// const DEV_URL = 'http://teamworkapi.mokingsoft.com';
// const DEV_URL = 'https://pmp.yangguangqicai.com/api'
// const pages = {
// m: {
// entry: 'src/pages/m/main.js',
// template: 'public/m.html',
// filename: 'index.html',
// chunks: ['chunk-vendors', 'chunk-common', 'm']
// },
// pc: {
// entry: 'src/pages/pc/main.js',
// template: 'public/pc.html',
// filename: 'index.html',
// chunks: ['chunk-vendors', 'chunk-common', 'pc']
// }
// }
const projectname = process.argv[3] // 获取build后面的参数确定执行哪个文件
function getEntry() {
let entries = {}
if (process.env.NODE_ENV == 'production') {
entries = {
index: {
// page的入口
entry: 'src/pages/'+projectname+'/main.js',
// 模板来源
template: `public/index.html`,
// 在 dist/index.html 的输出
// title: 'CIMS--'+projectName,
filename: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
} else {
let items = ['pc','m']
for (let i in items) {
const fileName=items[i];
entries[fileName] = {
entry: `src/pages/${fileName}/main.js`,
// 模板来源
template: `public/index.html`,
// 在 dist/index.html 的输出
filename: `${fileName}.html`,
// title: 'CIMS--'+fileName,
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', fileName]
}
}
}
return entries
}
// let usedPage = {}
// const projectname = process.argv[3] // 获取build后面的参数确定执行哪个文件
// if (env == 'production') {
// usedPage[projectname] = pages[projectname]
// } else {
// usedPage = pages
// }
const usedPage=getEntry();
console.log(process);
module.exports = {
// 测试 h5: newcrm_page_h5test newcrm_page_test
publicPath: process.env.NODE_ENV === 'production' ? '/newcrm_page_h5/' : '/',
// 正式 newcrm_page_h5 newcrm_page
// publicPath: process.env.NODE_ENV === 'production' ? '/crm_page/' : '/',
productionSourceMap: process.env.NODE_ENV !== 'production',
pages: usedPage,
outputDir: 'dist/' + projectname,
// indexPath: 'index.html', // 指定生成的index.html输出路径
css: {
loaderOptions: {
less: {
modifyVars: {
blue: '#3a82f8',
'text-color': '#333'
},
javascriptEnabled: true
}
}
},
devServer: {
host: HOST,
port: PORT,
proxy: {
// 配置跨域
'/api': {
// 要访问的跨域的api的域名
target: `${writeEnv.hosturl}/`,
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
}
},
}
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置
config.plugins.push(
new TerserPlugin({
// parallel:true,// 使用多进程并行运行来提高构建速度。默认并发运行数:os.cpus().length - 1。
terserOptions: {
ie8: true,
compress: {
drop_debugger: true,
drop_console: true // 生产环境自动删除console
},
warnings: false
}
}),
new CompressionPlugin({
// gzip压缩配置
test: /\.js$|\.html$|\.css/, // 匹配文件名
threshold: 10240, // 对超过10kb的数据进行压缩
deleteOriginalAssets: false, // 是否删除原文件
algorithm: 'gzip',
minRatio: 0.8
}),
// 可能中英文翻译有问题关注这个设置
// 提取 monent 有效部分,减小体积。压缩前 611k->163k
// en-gb 英国 en-us 美国(默认值) vi 越南 zh-cn 中国
new webpack.ContextReplacementPlugin(
/moment[\/\\]locale$/,
/^\.\/(zh-cn|en-us|vi)$/i
) // 在vue工程中,在引入moment时,发现build之后的包比不引入moment的包文件大了整整两百多kb,后来发现webpack会把moment的语言包也一起打包
)
} else {
// config.devtool = 'source-map';
// config.devtool = false;
}
config.resolve = {
extensions: ['.js', '.vue', '.json', '.css'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src'),
assets: resolve('src/assets'),
components: resolve('src/components')
}
}
},
lintOnSave: false,
chainWebpack: config => {
// config.module.rules.delete('svg')
config.module
.rule('iview')
.test(/\.js$/)
.use('babel')
.loader('babel-loader')
.end() // 此处是添加内容重点
config.resolve.alias.set('@', resolve('src'))
}
}