vue打包css路径不对_vue-cli3项⽬常⽤项配置
1. 配置全局cdn，包含js、css
2. 开启Gzip压缩，包含⽂件js、css
3. 去掉注释、去掉console.log
4. 压缩图⽚
5. 本地代理
6. 设置别名，vscode也能识别
7. 配置环境变量开发模式、测试模式、⽣产模式
css去掉滚动条8. 请求路由动态添加
9. axios配置
10. 添加mock数据
11. 配置全局less
12. 只打包改变的⽂件
13. 开启分析打包⽇志
完整的架构配置
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去掉注释
const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 开启压缩
const { HashedModuleIdsPlugin } = require('webpack');
function resolve(dir) {
return path.join(__dirname, dir)
}
const isProduction = v.NODE_ENV === 'production';
// cdn预加载使⽤
const externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
"element-ui": "ELEMENT"
}
const cdn = {
// 开发环境
dev: {
css: [
'unpkg/element-ui/lib/theme-chalk/index.css'
],
js: []
},
/
/ ⽣产环境
build: {
css: [
'unpkg/element-ui/lib/theme-chalk/index.css'
],
js: [
'cdn.jsdelivr/npm/vue@2.5.17/dist/vue.min.js',
'cdn.jsdelivr/npm/vue-router@3.0.1/dist/vue-router.min.js',
'cdn.jsdelivr/npm/vuex@3.0.1/dist/vuex.min.js',
'cdn.jsdelivr/npm/axios@0.18.0/dist/axios.min.js',
'unpkg/element-ui/lib/index.js'
]
}
}
lintOnSave: false, // 关闭eslint
productionSourceMap: false,
publicPath: './',
outputDir: v.outputDir, // ⽣成⽂件的⽬录名称
chainWebpack: config => {
.set('@', resolve('src'))
// 压缩图⽚
.rule('images')
.test(/.(png|jpe?g|gif|svg)(?.*)?$/)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
// webpack 会默认给commonChunk打进chunk-vendors，所以需要对webpack的配置进⾏delete        config.optimization.delete('splitChunks')
config.plugin('html').tap(args => {
if (v.NODE_ENV === 'production') {
args[0].cdn = cdn.build
}
if (v.NODE_ENV === 'development') {
args[0].cdn = cdn.dev
}
return args
})
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
},
configureWebpack: config => {
const plugins = [];
if (isProduction) {
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: true,
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']//移除console
}
}
})
)
// 服务器也要相应开启gzip
plugins.push(
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: /.(js|css)$/,// 匹配⽂件名
threshold: 10000, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 不删除源⽂件
minRatio: 0.8 // 压缩⽐
})
)
// ⽤于根据模块的相对路径⽣成 hash 作为模块 id, ⼀般⽤于⽣产环境
plugins.push(
new HashedModuleIdsPlugin()
)
// 开启分离js
config.optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 1000 * 60,
cacheGroups: {
vendor: {
test: /[/]node_modules[/]/,
name(module) {
// 排除node_modules 然后吧 @ 替换为空 ，考虑到服务器的兼容
const packageName = t.match(/[/]node_modules[/](.*?)([/]|$)/)[1]                                return `npm.${place('@', '')}`
}
}
}
}
};
// 取消webpack警告的性能提⽰
config.performance = {
hints: 'warning',
//⼊⼝起点的最⼤体积
maxEntrypointSize: 1000 * 500,
//⽣成⽂件的最⼤体积
maxAssetSize: 1000 * 1000,
//只给出 js ⽂件的性能提⽰
assetFilter: function (assetFilename) {
dsWith('.js');
}
}
// 打包时npm包转CDN
}
return { plugins }
},
pluginOptions: {
// 配置全局less
'style-resources-loader': {
'style-resources-loader': {
preProcessor: 'less',
patterns: [resolve('./src/style/theme.less')]
}
},
devServer: {
open: false, // ⾃动启动浏览器
host: '0.0.0.0', // localhost
port: 6060, // 端⼝号
https: false,
hotOnly: false, // 热更新
proxy: {
'^/sso': {
target: v.VUE_APP_SSO, // 重写路径
ws: true,  //开启WebSocket
secure: false,      // 如果是https接⼝，需要配置这个参数
changeOrigin: true
}
}
}
}
html模板配置cdn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (var i in
htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.            Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (var i in
htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
开启Gzip压缩，包含⽂件js、css
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: /.(js|css)$/, // 匹配⽂件名
threshold: 10000, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 不删除源⽂件
minRatio: 0.8 // 压缩⽐
})
去掉注释、去掉console.log
安装cnpm i uglifyjs-webpack-plugin -D
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'] //移除console
}
}
})
压缩图⽚
chainWebpack: config => {
// 压缩图⽚
.rule('images')
.test(/.(png|jpe?g|gif|svg)(?.*)?$/)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
}
本地代理
devServer: {
open: false, // ⾃动启动浏览器
host: '0.0.0.0', // localhost
port: 6060, // 端⼝号
https: false,
hotOnly: false, // 热更新
proxy: {
'^/sso': {
target: v.VUE_APP_SSO, // 重写路径
ws: true, //开启WebSocket
secure: false, // 如果是https接⼝，需要配置这个参数            changeOrigin: true
}
}
}
设置vscode 识别别名