关于vue.config.js的部分配置
在vue2.0中，配置都写在vue.config.js文件中；记录下常用配置；
·
在vue2.0中，配置都写在vue.config.js文件中；记录下常用配置；
webpack的配置都已被集成，查看工程的webpack的原有配置：
vue inspect //查看webpack全部配置
vue inspect --rules //查看webpack所有规则
vue inspect --rule svg //查看某一个规则的详细配置，此处查看的是svg的配置1.基础配置
const name = defaultSettings.title || '系统的名称' // 标题
// const port = process.env.port || process.env.npm_config_port || 80 // 端口
const port = 8082
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: 'static',
// 是否开启eslint保存检测，有效值：ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
port,
},
}devServe的具体配置：
如此配置后，当我们在访问`/api`时， 就会被定向到代理地址，还可 pathRewrite 重新路径；
devServer:{
host: 'localhost',//target host
port: 8080,
open: true, // 编辑完成后是否自动打开浏览器
overlay: {
warnings: false,
errors: true,
}, // 编译报错时，报错内容是否在浏览器全屏展示
//proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
proxy:{
// [process.env.VUE_APP_BASE_API]: { //.env.development 文件中配置的基础路径
'/api':{
target: 'http://192.168.1.30:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
//ws: true, // proxy websockets
//pathRewrite方法重写url
pathRewrite: {
'^/api': '/'
//pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
}
}}2.chainWebpack
去除默认预加载
Preload： 用于标记页面加载后即将用到的资源，浏览器将在主体渲染前加载preload标记文件；
Prefetch: 用于标记浏览器在页面加载完成后，利用空闲时间预加载的内容；
chainWebpack(config) {
// 移除 preload 插件 vue-cli为所有初始化渲染需要的文件自动生成 preload 提示；
config.plugins.delete('preload')
// 移除 prefetch 插件 Vue CLI 应用默认为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成prefetch提示
config.plugins.delete('prefetch')
//config.plugins.delete('preload-${name}')//可配置移除预加载的页面。eg:login.html则添加config.plugins.delete('preload-login'),
}
// 链式配置webpack -- svg
chainWebpack (config) {
// 禁用系统内部对svg的处理
config.module.rule ('svg').exclude.add (resolve ('./src/icons/svg'));
// 新建规则处理svg文件
config.module
.rule ('icons')
.test (/\.svg$/) //添加匹配规则
.include.add (resolve ('./src/icons/svg')) //添加我们要处理的文件路径
.end () //上面的add方法改变了上下文，调用end()退回到include这一级
.use ('svg-sprite-loader') //使用"svg-sprite-loader"这个依赖
.loader ('svg-sprite-loader')//选中这个依赖
.options ({
symbolId: 'icon-[name]', // 这个配置是这个包的配置不属于webpack，可以查看相关文档，symbolId指定我们使用svg图片的名字
}); //传入配置
},3.贴个完整的
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = '' // 标题
const port = process.env.port || process.env.npm_config_port || 8082 // 端口
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server
// devServer: {
// host: '0.0.0.0',
// port: port,
// open: true,
// proxy: {
// [process.env.VUE_APP_BASE_API]: {
// target: `http://192.168.1.16:8085`,
// changeOrigin: true,
// pathRewrite: {
// '^/api': '/api'
// //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
// //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
// }
// },
// },
// disableHostCheck: true,
// },
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
}
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src'),
},
},
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// set svg-sprite-loader
config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
.end()
config.when(process.env.NODE_ENV !== 'development', (config) => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/,
}, ])
.end()
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial', // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true,
},
},
})
config.optimization.runtimeChunk('single'), {
from: path.resolve(__dirname, './public/robots.txt'), // 防爬虫文件
to: './', // 到根目录下
}
})
},
}
收集二
const path = require('path');
const HotHashWebpackPlugin = require('hot-hash-webpack-plugin');
const WebpackBar = require('webpackbar');
const resolve = (dir) => path.join(__dirname, '.', dir);
module.exports = {
productionSourceMap: false,
publicPath: './',
outputDir: 'dist',
assetsDir: 'assets',
devServer: {
port: 9999,
host: '0.0.0.0',
https: false,
open: true
},
chainWebpack: (config) => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
types.forEach(type => {
let rule = config.module.rule('less').oneOf(type)
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [path.resolve(__dirname, './lessVariates.less')]
});
});
config.resolve.alias
.set('@', resolve('src'))
.set('api', resolve('src/apis'))
.set('common', resolve('src/common'))
config.module.rule('images').use('url-loader')
.tap(options => ({
name: './assets/images/[name].[ext]',
quality: 85,
limit: 0,
esModule: false,
}));
config.module.rule('svg')
.test(/.svg$/)
.include.add(resolve('src/svg'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader');
config.plugin('define').tap(args => [{
...args,
"window.isDefine": JSON.stringify(true)
}]);
// 生产环境配置
if (process.env.NODE_ENV === 'production') {
config.output.filename('./js/[name].[chunkhash:8].js');
config.output.chunkFilename('./js/[name].[chunkhash:8].js');
config.plugin('extract-css').tap(args => [{
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
}]);
config.plugin('hotHash').use(HotHashWebpackPlugin, [{ version : '1.0.0'}]);
config.plugin('webpackBar').use(WebpackBar);
config.optimization.minimize(true)
.minimizer('terser')
.tap(args => {
let { terserOptions } = args[0];
terserOptions.compress.drop_console = true;
terserOptions.compress.drop_debugger = true;
return args
});
config.optimization.splitChunks({
cacheGroups: {
common: {
name: 'common',
chunks: 'all',
minSize: 1,
minChunks: 2,
priority: 1
},
vendor: {
name: 'chunk-libs',
chunks: 'all',
test: /[\/]node_modules[\/]/,
priority: 10
}
}
});
}
}
};
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献8条内容
所有评论(0)