alias cli3 配置_vue-cli3全面配置详解
創建項目
配置環境變量
通過在package.json里的scripts配置項中添加--mode xxx來選擇不同環境
在項目根目錄中新建.env, .env.production,...等文件
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中，代碼中可以通過process.env.VUE_APP_BASE_API訪問
NODE_ENV 和 BASE_URL 是兩個特殊變量，在代碼中始終可用
.env serve默認的環境變量
NODE_ENV?=?'development'
VUE_APP_BASE_API?=?''
.env.production build默認的環境變量
NODE_ENV?=?'production'
VUE_APP_BASE_API?=?''
配置vue.config.js
const?IS_PROD?=?['production',?'prod'].includes(process.env.NODE_ENV);
module.exports?=?{
baseUrl:?'./',?//?默認'/'，部署應用包時的基本?URL
outputDir:?process.env.outputDir?||?'dist',?//?'dist',?生產環境構建文件的目錄
assetsDir:?'',??//?相對于outputDir的靜態資源(js、css、img、fonts)目錄
lintOnSave:?false,
runtimeCompiler:?true,?//?是否使用包含運行時編譯器的?Vue?構建版本
productionSourceMap:?false,??//?生產環境的?source?map
parallel:?require('os').cpus().length?>?1,
pwa:?{}
};
配置proxy跨域
const?IS_PROD?=?['production',?'prod'].includes(process.env.NODE_ENV);
module.exports?=?{
devServer:?{
//?overlay:?{
//???warnings:?true,
//???errors:?true
//?},
open:?IS_PROD,
host:?'0.0.0.0',
port:?8000,
https:?false,
hotOnly:?false,
proxy:?{
'/api':?{
target:?process.env.VUE_APP_BASE_API?||?'http://127.0.0.1:8080',
changeOrigin:?true
}
}
}
}
//在項目中具體的配置
devServer:?{
//webpack?dev?serve工具提供的
//???assetsSubDirectory:?'public',
//???assetsPublicPath:?'/',
proxy:?{
'api':?{?//如果請求api的話?改下面的配置
target:?'http://localhost:8080/',?//轉發端口
ws:?true,?//?是否啟用websockets
changOrigin:?true,
//開啟代理：在本地會創建一個虛擬服務端，然后發送請求的數據，并同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
pathRewrite:?{
'^/api'?:?'/mock'
}
}
}
},
修復HMR(熱更新)失效
module.exports?=?{
chainWebpack:?config?=>?{
//?修復HMR
config.resolve.symlinks(true);
}
}
修復Lazy loading routes Error： Cyclic dependency https://github.com/vuejs/vue-cli/issues/1669
module.exports?=?{
chainWebpack:?config?=>?{
config.plugin('html').tap(args?=>?{
args[0].chunksSortMode?=?'none';
return?args;
});
}
}
添加別名
const?path?=??require('path');
const?resolve?=?(dir)?=>?path.join(__dirname,?dir);
const?IS_PROD?=?['production',?'prod'].includes(process.env.NODE_ENV);
module.exports?=?{
chainWebpack:?config?=>?{
//?添加別名
config.resolve.alias
.set('@',?resolve('src'))
.set('assets',?resolve('src/assets'))
.set('components',?resolve('src/components'))
.set('layout',?resolve('src/layout'))
.set('base',?resolve('src/base'))
.set('static',?resolve('src/static'));
}
}
添加打包分析
const?BundleAnalyzerPlugin?=?require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports?=?{
chainWebpack:?config?=>?{
//?打包分析
if?(process.env.IS_ANALYZ)?{
config.plugin('webpack-report')
.use(BundleAnalyzerPlugin,?[{
analyzerMode:?'static',
}]);
}
}
}
配置externals
防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴
module.exports?=?{
configureWebpack:?config?=>?{
config.externals?=?{
'vue':?'Vue',
'element-ui':?'ELEMENT',
'vue-router':?'VueRouter',
'vuex':?'Vuex',
'axios':?'axios'
}
}
}
去掉console.log
方法一：
const?UglifyJsPlugin?=?require('uglifyjs-webpack-plugin');
module.exports?=?{
configureWebpack:?config?=>?{
if?(IS_PROD)?{
const?plugins?=?[];
plugins.push(
new?UglifyJsPlugin({
uglifyOptions:?{
compress:?{
warnings:?false,
drop_console:?true,
drop_debugger:?false,
pure_funcs:?['console.log']//移除console
}
},
sourceMap:?false,
parallel:?true
})
);
config.plugins?=?[
...config.plugins,
...plugins
];
}
}
}
方法二：使用babel-plugin-transform-remove-console插件
npm?i?--save-dev?babel-plugin-transform-remove-console
在babel.config.js中配置
const?plugins?=?[];
if(['production',?'prod'].includes(process.env.NODE_ENV))?{
plugins.push("transform-remove-console")
}
module.exports?=?{
presets:?[["@vue/app",{"useBuiltIns":?"entry"}]],
plugins:?plugins
};
開啟gzip壓縮npm?i?--save-dev?compression-webpack-plugin
const?CompressionWebpackPlugin?=?require('compression-webpack-plugin');
const?productionGzipExtensions?=?/\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports?=?{
configureWebpack:?config?=>?{
if?(IS_PROD)?{
const?plugins?=?[];
plugins.push(
new?CompressionWebpackPlugin({
filename:?'[path].gz[query]',
algorithm:?'gzip',
test:?productionGzipExtensions,
threshold:?10240,
minRatio:?0.8
})
);
config.plugins?=?[
...config.plugins,
...plugins
];
}
}
}
還可以開啟比gzip體驗更好的Zopfli壓縮詳見https://webpack.js.org/plugins/compression-webpack-plugin
npm?i?--save-dev?@gfx/zopfli?brotli-webpack-plugin
const?CompressionWebpackPlugin?=?require('compression-webpack-plugin');
const?zopfli?=?require("@gfx/zopfli");
const?BrotliPlugin?=?require("brotli-webpack-plugin");
const?productionGzipExtensions?=?/\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports?=?{
configureWebpack:?config?=>?{
if?(IS_PROD)?{
const?plugins?=?[];
plugins.push(
new?CompressionWebpackPlugin({
algorithm(input,?compressionOptions,?callback)?{
return?zopfli.gzip(input,?compressionOptions,?callback);
},
compressionOptions:?{
numiterations:?15
},
minRatio:?0.99,
test:?productionGzipExtensions
})
);
plugins.push(
new?BrotliPlugin({
test:?productionGzipExtensions,
minRatio:?0.99
})
);
config.plugins?=?[
...config.plugins,
...plugins
];
}
}
}
為sass提供全局樣式，以及全局變量
可以通過在main.js中Vue.prototype.$src = process.env.VUE_APP_SRC;掛載環境變量中的配置信息，然后在js中使用$src訪問。
css中可以使用注入sass變量訪問環境變量中的配置信息
module.exports?=?{
css:?{
modules:?false,
extract:?IS_PROD,
sourceMap:?false,
loaderOptions:?{
sass:?{
//?向全局sass樣式傳入共享的全局變量
data:?`@import?"~assets/scss/variables.scss";$src:?"${process.env.VUE_APP_SRC}";`
}
}
}
}
在scss中引用
.home?{
background:?url($src?+?'/images/500.png');
}
添加IE兼容
npm?i?--save?@babel/polyfill
//?在main.js中添加
import?'@babel/polyfill';
配置babel.config.js
const?plugins?=?[];
module.exports?=?{
presets:?[["@vue/app",{"useBuiltIns":?"entry"}]],
plugins:?plugins
};
配置文件上傳OSS
npm?i?--save-dev?webpack-oss
const?AliOssPlugin?=?require('webpack-oss');
module.exports?=?{
configureWebpack:?config?=>?{
if?(IS_PROD)?{
const?plugins?=?[];
//?上傳文件到oss
if?(process.env.ACCESS_KEY_ID?||?process.env.ACCESS_KEY_SECRET?||?process.env.REGION?||?process.env.BUCKET?||?process.env.PREFIX)?{
plugins.push(
new?AliOssPlugin({
accessKeyId:?process.env.ACCESS_KEY_ID,
accessKeySecret:?process.env.ACCESS_KEY_SECRET,
region:?process.env.REGION,
bucket:?process.env.BUCKET,
prefix:?process.env.PREFIX,
exclude:?/.*\.html$/,
enableLog:?true,
ignoreError:?false,
deleteMode:?false,
deleteAll:?false
})
);
}
config.plugins?=?[
...config.plugins,
...plugins
];
}
}
}
完整配置
安裝依賴npm?i?--save-dev?compression-webpack-plugin?babel-plugin-transform-remove-console??@gfx/zopfli?brotli-webpack-plugin
環境配置
.env
NODE_ENV?=?'development'
VUE_APP_BASE_API?=?'https://demo.cn/api'
.env.production
NODE_ENV?=?'production'
VUE_APP_BASE_API?=?''
babel.config.js
const?plugins?=?[];
//?if(['production',?'prod'].includes(process.env.NODE_ENV))?{
//???plugins.push("transform-remove-console")
//?}
module.exports?=?{
presets:?[["@vue/app",{"useBuiltIns":?"entry"}]],
plugins:?plugins
};
vue.config.js
const?BundleAnalyzerPlugin?=?require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const?UglifyJsPlugin?=?require('uglifyjs-webpack-plugin');
const?CompressionWebpackPlugin?=?require('compression-webpack-plugin');
//?const?zopfli?=?require("@gfx/zopfli");
//?const?BrotliPlugin?=?require("brotli-webpack-plugin");
const?AliOssPlugin?=?require('webpack-oss');
const?path?=?require('path');
const?resolve?=?(dir)?=>?path.join(__dirname,?dir);
const?IS_PROD?=?['production',?'prod'].includes(process.env.NODE_ENV);
const?productionGzipExtensions?=?/\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports?=?{
baseUrl:?IS_PROD???process.env.VUE_APP_SRC?||?'/'?:?'./',?//?默認'/'，部署應用包時的基本?URL
outputDir:?process.env.outputDir?||?'dist',?//?'dist',?生產環境構建文件的目錄
assetsDir:?'',??//?相對于outputDir的靜態資源(js、css、img、fonts)目錄
lintOnSave:?false,
runtimeCompiler:?true,?//?是否使用包含運行時編譯器的?Vue?構建版本
productionSourceMap:?false,??//?生產環境的?source?map
configureWebpack:?config?=>?{
//?cdn引用時配置externals
//?config.externals?=?{
//?????'vue':?'Vue',
//?????'element-ui':?'ELEMENT',
//?????'vue-router':?'VueRouter',
//?????'vuex':?'Vuex',
//?????'axios':?'axios'
//?}
if?(IS_PROD)?{
const?plugins?=?[];
plugins.push(
new?UglifyJsPlugin({
uglifyOptions:?{
compress:?{
warnings:?false,
drop_console:?true,
drop_debugger:?false,
pure_funcs:?['console.log']//移除console
}
},
sourceMap:?false,
parallel:?true
})
);
plugins.push(
new?CompressionWebpackPlugin({
filename:?'[path].gz[query]',
algorithm:?'gzip',
test:?productionGzipExtensions,
threshold:?10240,
minRatio:?0.8
})
);
//?上傳文件到oss
//?if?(process.env.ACCESS_KEY_ID?||?process.env.ACCESS_KEY_SECRET?||?process.env.REGION?||?process.env.BUCKET?||?process.env.PREFIX)?{
//?????plugins.push(
//?????????new?AliOssPlugin({
//?????????????accessKeyId:?process.env.ACCESS_KEY_ID,
//?????????????accessKeySecret:?process.env.ACCESS_KEY_SECRET,
//?????????????region:?process.env.REGION,
//?????????????bucket:?process.env.BUCKET,
//?????????????prefix:?process.env.PREFIX,
//?????????????exclude:?/.*\.html$/,
//?????????????enableLog:?true,
//?????????????ignoreError:?false,
//?????????????deleteMode:?false,
//?????????????deleteAll:?false
//?????????})
//?????);
//?}
//?Zopfli壓縮，需要響應VC庫?https://webpack.js.org/plugins/compression-webpack-plugin/
//?plugins.push(
//?????new?CompressionWebpackPlugin({
//?????????algorithm(input,?compressionOptions,?callback)?{
//?????????????return?zopfli.gzip(input,?compressionOptions,?callback);
//?????????},
//?????????compressionOptions:?{
//?????????????numiterations:?15
//?????????},
//?????????minRatio:?0.99,
//?????????test:?productionGzipExtensions
//?????})
//?);
//?plugins.push(
//?????new?BrotliPlugin({
//?????????test:?productionGzipExtensions,
//?????????minRatio:?0.99
//?????})
//?);
config.plugins?=?[
...config.plugins,
...plugins
];
}
},
chainWebpack:?config?=>?{
//?修復HMR
config.resolve.symlinks(true);
//?修復Lazy?loading?routes?Error：?Cyclic?dependency??[https://github.com/vuejs/vue-cli/issues/1669]
config.plugin('html').tap(args?=>?{
args[0].chunksSortMode?=?'none';
return?args;
});
//?添加別名
config.resolve.alias
.set('@',?resolve('src'))
.set('assets',?resolve('src/assets'))
.set('components',?resolve('src/components'))
.set('layout',?resolve('src/layout'))
.set('base',?resolve('src/base'))
.set('static',?resolve('src/static'));
//?打包分析
if?(process.env.IS_ANALYZ)?{
config.plugin('webpack-report')
.use(BundleAnalyzerPlugin,?[{
analyzerMode:?'static',
}]);
}
//?多頁面配置，為js添加hash
//?config.output.chunkFilename(`js/[name].[chunkhash:8].js`)
//?修改圖片輸出路徑
//?config.module
//???.rule('images')
//???.test(/\.(png|jpe?g|gif|ico)(\?.*)?$/)
//???.use('url-loader')
//???.loader('url-loader')
//???.options({
//???????name:?path.join('../assets/',?'img/[name].[ext]')
//???})
},
css:?{
modules:?false,
extract:?IS_PROD,
//?為css后綴添加hash
//?extract:?{
//??filename:?'css/[name].[hash:8].css',
//??chunkFilename:?'css/[name].[hash:8].css'
//}，
sourceMap:?false,
loaderOptions:?{
sass:?{
//?向全局sass樣式傳入共享的全局變量
//?data:?`@import?"~assets/scss/variables.scss";$src:?"${process.env.VUE_APP_SRC}";`
data:?`$src:?"${process.env.VUE_APP_SRC}";`
},
//?px轉換為rem
//?postcss:?{
//???plugins:?[
//?????require('postcss-pxtorem')({
//???????rootValue?:?1,?//?換算的基數
//???????selectorBlackList??:?['weui',?'el'],?//?忽略轉換正則匹配項
//???????propList???:?['*']
//?????})
//???]
//?}
}
},
pluginOptions:?{
//?安裝vue-cli-plugin-style-resources-loader插件
//?添加全局樣式global.scss
//?"style-resources-loader":?{
//???preProcessor:?"scss",
//???patterns:?[
//?????resolve(__dirname,?"./src/scss/scss/variables.scss")
//???]
//?}
},
parallel:?require('os').cpus().length?>?1,
pwa:?{},
devServer:?{
//?overlay:?{
//???warnings:?true,
//???errors:?true
//?},
open:?IS_PROD,
host:?'0.0.0.0',
port:?8000,
https:?false,
hotOnly:?false,
proxy:?{
'/api':?{
target:?process.env.VUE_APP_BASE_API?||?'http://127.0.0.1:8080',
changeOrigin:?true
}
}
}
};
總結
以上是生活随笔為你收集整理的alias cli3 配置_vue-cli3全面配置详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python opencv 内存泄露_解
- 下一篇： jsp 跳到servlet路径_想打开一