vue cli3之vue.config.js 文件配置
\'use strict\'const path = require(\'path\')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = \'vue project\' // page title
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
const port = 8081 // dev port
const HtmlWebpackPlugin = require(\'html-webpack-plugin\') // 引入CDN配置插件
const externals = { // 不打包插件
// vue: \'Vue\',
// \'vue-router\': \'VueRouter\',
// vuex: \'Vuex\',
// axios: \'axios\',
// \'element-ui\': \'ElementUI\',
// vconsole:\'vConsole\', // 生产打包放开
moment: \'moment\',
echarts: \'echarts\'
}
const cdn = {
// 开发环境
dev: {
css: [
],
js: [
]
},
// 生产环境 配置对应CDN地址
build: {
css: [
// \'https://cdn.bootcdn.net/ajax/libs/element-ui/2.5.4/theme-chalk/index.css\'
],
js: [
// \'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js\',
// \'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js\',
// \'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js\',
// \'https://cdn.bootcss.com/axios/0.19.0/axios.min.js\',
\'https://cdn.bootcdn.net/ajax/libs/moment.js/2.23.0/moment.min.js\',
\'https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.min.js\'
]
}
}
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
// 205 || 生产
// publicPath: \'/web/vue/\',
runtimeCompiler: true, // 运行时报错配置
publicPath: \'/\',
outputDir: \'dist\',
assetsDir: \'static\',
// eslint-loader是否在保存的时候检查
lintOnSave: false,
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// 跨域代理
proxy: {
"/api": {
target: \'http://192\',
changeOrigin: true, // 是否改变域名
ws: true
// pathRewrite: {
// // 路径重写
// "/api": "" // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
// }
}
}
},
configureWebpack: {
// provide the app\'s title in webpack\'s name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
\'@\': resolve(\'./src\'),
\'assets\': resolve(\'./src/assets\'),
\'style\': resolve(\'./src/style\')
}
},
externals: process.env.NODE_ENV === \'production\' ? externals: {}
},
css: {
loaderOptions: {
postcss: {
plugins: [
require(\'postcss-plugin-px2rem\')({
rootValue: 46, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 0 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
},
chainWebpack: config => {
// config.entry.app = [\'babel-polyfill\', \'./src/main.js\'];
config.plugins.delete("preload"); // TODO: need test
config.plugins.delete("prefetch"); // TODO: need test
// 对vue-cli内部的 webpack 配置进行更细粒度的修改
config.plugin(\'html\').tap(args => {
if (process.env.NODE_ENV === \'production\') {
args[0].cdn = cdn.build
}
if (process.env.NODE_ENV === \'development\') {
args[0].cdn = cdn.dev
}
return args
})
// set svg-sprite-loader
// config.entry(\'main\').add(\'babel-polyfill\');
config.module
.rule(\'iview\')
.test(/iview.src.*?js$/)
.use(\'babel\')
.loader(\'babel-loader\')
.end();
config.module
.rule("svg")
.exclude.add(resolve("src/icons"))
.end();
config.module
.rule("icons")
.test(/\.svg$/)
.include.add(resolve("src/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
})
.end();
// set preserveWhitespace
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap(options => {
options.compilerOptions.preserveWhitespace = true;
return options;
})
.end();
config
// https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === "development", config =>
config.devtool("cheap-source-map")
);
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", // 将elementUI拆分成一个包
// 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(.*)/ // 以适应cnpm
// },
commons: {
name: "chunk-commons",
test: resolve("src/components"), // 可以自定义规则
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
});
config.optimization.runtimeChunk("single");
});
}
}
以上是 vue cli3之vue.config.js 文件配置 的全部内容， 来源链接： utcz.com/z/377844.html
