-
多页面或者多项目配置
projects.js
const config = {
web: {
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
title: 'web'
},
api: {
entry: 'src/pages/api/main.js',
template: 'public/api.html',
filename: 'api.html',
title: 'api 测试'
}
},
devServer: {
port: 8080, // 端口地址
open: true,
overlay: {
warnings: false,
errors: true
},
historyApiFallback: { // 路由history模式必须配置
verbose: true,
rewrites: [
{ from: /^\/index\/.*$/, to: '/index.html' },
{ from: /^\/api\/.*$/, to: '/api.html' }
]
}
}
},
api: {
pages: {
index: {
entry: 'src/projects/api/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
devServer: {
port: 8081, // 端口地址
open: true,
overlay: {
warnings: false,
errors: true
}
}
}
}
module.exports = config
-
开启gzip
先安装打包插件compression-webpack-plugin:npm install --save-dev compression-webpack-plugin,再修改vue.config.js文件
'use strict'
const projects = require('./config/projects.js') // 引入子系统运行打包配置
const CompressionPlugin = require('compression-webpack-plugin')
let projectName = process.env.PROJECT_NAME // 获取package.json中scripts配置的变量
console.log(projectName)
module.exports = {
...projects[projectName],
publicPath: '/',
// 输出文件目录
outputDir: 'dist/' + projectName + '/',
publicPath: '/',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
})
]
}
}
}
}
- el-menu导航重复点击可能控制台会报[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]
解决:
方案1
使用低版本,vue-router版本到3.0.7以下
方案2
禁止全局路由错误打印
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
方案3(推荐)
给每个router.push增加回调函数。
router.push('/index').catch(err => {err})
- 正式环境移除console
安装依赖包:npm install babel-plugin-transform-remove-console --save-dev
配置:Vue项目根目录 babel.config.js 文件
const plugins = []
if (process.env.NODE_ENV === 'production') {
plugins.push('transform-remove-console');
}
module.exports = {
presets: [
'@vue/app'
],
plugins: plugins
}
-
跨域
vue.config.js配置
proxy: {
'/proxy': {
target: 'http://192.168.1.123:8080/xxx/', //真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: {
'^/proxy': ''
}
},
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.1.50:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
// '/dev-api': {
// target: 'http://192.168.1.50:8080', //真实的后台接口
// changOrigin: true, //允许跨域
// pathRewrite: {
// '^/dev-api': ''
// }
// }
},
disableHostCheck: true
},