當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

alias cli3 配置_vue-cli3全面配置详解

發(fā)布時間：2025/3/19 vue 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 alias cli3 配置_vue-cli3全面配置详解小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

創(chuàng)建項目

配置環(huán)境變量

通過在package.json里的scripts配置項中添加--mode xxx來選擇不同環(huán)境

在項目根目錄中新建.env, .env.production,...等文件

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中，代碼中可以通過process.env.VUE_APP_BASE_API訪問

NODE_ENV 和 BASE_URL 是兩個特殊變量，在代碼中始終可用

.env serve默認(rèn)的環(huán)境變量

NODE_ENV?=?'development'

VUE_APP_BASE_API?=?''

.env.production build默認(rèn)的環(huán)境變量

NODE_ENV?=?'production'

VUE_APP_BASE_API?=?''

配置vue.config.js

const?IS_PROD?=?['production',?'prod'].includes(process.env.NODE_ENV);

module.exports?=?{

baseUrl:?'./',?//?默認(rèn)'/'，部署應(yīng)用包時的基本?URL

outputDir:?process.env.outputDir?||?'dist',?//?'dist',?生產(chǎn)環(huán)境構(gòu)建文件的目錄

assetsDir:?'',??//?相對于outputDir的靜態(tài)資源(js、css、img、fonts)目錄

lintOnSave:?false,

runtimeCompiler:?true,?//?是否使用包含運行時編譯器的?Vue?構(gòu)建版本

productionSourceMap:?false,??//?生產(chǎn)環(huán)境的?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/',?//轉(zhuǎn)發(fā)端口

ws:?true,?//?是否啟用websockets

changOrigin:?true,

//開啟代理：在本地會創(chuàng)建一個虛擬服務(wù)端，然后發(fā)送請求的數(shù)據(jù)，并同時接收請求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會有跨域問題

pathRewrite:?{

'^/api'?:?'/mock'

}

修復(fù)HMR(熱更新)失效

module.exports?=?{

chainWebpack:?config?=>?{

//?修復(fù)HMR

config.resolve.symlinks(true);

}

修復(fù)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)再去從外部獲取這些擴(kuò)展依賴

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;掛載環(huán)境變量中的配置信息，然后在js中使用$src訪問。

css中可以使用注入sass變量訪問環(huán)境變量中的配置信息

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

環(huán)境配置

.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?||?'/'?:?'./',?//?默認(rèn)'/'，部署應(yīng)用包時的基本?URL

outputDir:?process.env.outputDir?||?'dist',?//?'dist',?生產(chǎn)環(huán)境構(gòu)建文件的目錄

assetsDir:?'',??//?相對于outputDir的靜態(tài)資源(js、css、img、fonts)目錄

lintOnSave:?false,

runtimeCompiler:?true,?//?是否使用包含運行時編譯器的?Vue?構(gòu)建版本

productionSourceMap:?false,??//?生產(chǎn)環(huán)境的?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壓縮，需要響應(yīng)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?=>?{

//?修復(fù)HMR

config.resolve.symlinks(true);

//?修復(fù)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轉(zhuǎn)換為rem

//?postcss:?{

//???plugins:?[

//?????require('postcss-pxtorem')({

//???????rootValue?:?1,?//?換算的基數(shù)

//???????selectorBlackList??:?['weui',?'el'],?//?忽略轉(zhuǎn)換正則匹配項

//???????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

}

};

總結(jié)

以上是生活随笔為你收集整理的alias cli3 配置_vue-cli3全面配置详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python opencv 内存泄露_解
下一篇： jsp 跳到servlet路径_想打开一