如果要部署到二级目录，将项目内部引用的css、img修改为相对路径
const path = require("path");
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//引入该插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
//匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
module.exports = {
configureWebpack: config => {
let myPlugins = [
new webpack.ProvidePlugin({
})
];
if (process.env.NODE_ENV === "production") {
// 生产环境配置...
const plugins = []
plugins.push(
// gzip压缩配置
new CompressionWebpackPlugin({
filename: '[path].gz[query]', //目标资源名称
algorithm: 'gzip',
test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
threshold: 10240, //只处理比这个值大的资源。按字节计算(设置10K以上进行压缩)
minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
}),
//代码压缩配置
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
// 删除注释
output:{
comments:false
},
// 删除console debugger 删除警告
compress: {
drop_console: true, //console
drop_debugger: true,
pure_funcs: ['console.log','console.debug']//移除console
}
}
})
)
// End 生成 gzip 压缩文件
config.plugins = [...config.plugins, ...plugins]
} else {
// 开发环境配置
}
//添加插件
config.plugins.push(...myPlugins)
//指定babel-polyfill 入口 IE11报语法错误bug修复
config.entry.app = ["babel-polyfill", "./src/main.js"];
},
//指定IE下报错的路径，在vue.config.js中配置transpileDependencies。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill
//transpileDependencies: ['node_modules/*'],
transpileDependencies: [
'[email protected]@pdfjs-dist',
'[email protected]@jspdf'
],
// 基本路径
publicPath: process.env.NODE_ENV === 'production'? './': '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
runtimeCompiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: config => {
// 优化moment 去掉国际化内容
config.plugin('ignore')
// 忽略/moment/locale下的所有语言文件
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
//vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: false,
// 开启 CSS source maps?
sourceMap: false,
//安装css-loader 后导致样式失效，增加下面配置
//esModule: false,
// css预设器配置项
loaderOptions: {
sass: {
//scss 全局变量引用
//sass-loader v8-，这个选项名是 "data"
// sass-loader v8 中，这个选项名是 "prependData"
// sass-loader v10+，这个选项名是 "additionalData"
additionalData: `
@import "node_modules/compass-mixins/lib/compass/css3";
@import "node_modules/compass-mixins/lib/compass/utilities";
@import "./src/assets/scss/globalVariable";
`
}
},
// 启用 CSS modules for all css / pre-processor files.
modules: false
//requireModuleExtension: true
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
//dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
//host: 'localhost',
disableHostCheck: true,
port: 8000,
https: false,
hotOnly: false,
//proxy: null, // 设置代理
before: app => {}
},
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: '山西交控集团公招系统',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
},
// 第三方插件配置
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
//加上自己的文件路径，不能使用别名
path.resolve(__dirname, 'src/assets/globalVariable'),
path.resolve(__dirname, 'node_modules/compass-mixins/lib'),
path.resolve(__dirname, 'src/assets/base'),
]
}
}
}
router/index.js:
......
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL, // NODE_ENV 改为 BASE_URL,
routes
})