有些針對(duì) @vue/cli 的全局配置囤锉，例如你慣用的包管理器和你本地保存的 preset，都保存在 home 目錄下一個(gè)名叫 .vuerc 的 JSON 文件护锤。你可以用編輯器直接編輯這個(gè)文件來更改已保存的選項(xiàng)官地。
你也可以使用 vue config 命令來審查或修改全局的 CLI 配置。
vue.config.js文件如果沒有,可以手動(dòng)創(chuàng)建.
- publicPath：設(shè)置資源的路徑烙懦，如果首頁為https://www.my-app.com/ 應(yīng)用在https://www.my-app.com/my-app/ 則publicPath 應(yīng)為 /my-app/驱入。
Type: string，Default: '/'氯析，可以為空亏较。即相對(duì)路徑。
module.exports={
publicPath:process.env.NODE_ENV
==='production' ? '/production-sub-path/' : '/'}
- outputDir：當(dāng)運(yùn)行 vue-cli-service build 時(shí)生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄掩缓。注意目標(biāo)目錄在構(gòu)建之前會(huì)被清除 (構(gòu)建時(shí)傳入 --no-clean 可關(guān)閉該行為)雪情。
Type: string Default: 'dist'
- assetsDir：放置生成的靜態(tài)資源 (js、css你辣、img巡通、fonts) 的 (相對(duì)于 outputDir 的) 目錄。
Type: string Default: ''
- indexPath：指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)舍哄。也可以是一個(gè)絕對(duì)路徑宴凉。
Type: string Default: 'index.html'
- filenameHashing：生成的靜態(tài)資源包含了hash值，用于緩存表悬，但是也需要你的index.html是由VueCli生成弥锄，可以設(shè)置為false。
Type: boolean Default: true
- pages:以多頁面模式構(gòu)建應(yīng)用程序時(shí)需要(太菜了,暫時(shí)用不到).
- lintOnSave:是否需要每次保存時(shí)都掃描代碼查錯(cuò),(一個(gè)工具,以后看)
- runtimeCompiler:沒啥用 默認(rèn)為
Default: false
image.png
runtimeonly:以.vue文件的形式開發(fā),更好用
image.png - transpileDependencies:涉及到了
node_modules文件夾(第三個(gè)以后) - productionSourceMap:生成一個(gè)map文件,map文件的作用在于：項(xiàng)目打包后签孔，代碼都是經(jīng)過壓縮加密的叉讥，如果運(yùn)行時(shí)報(bào)錯(cuò)窘行，輸出的錯(cuò)誤信息無法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)饥追。也就是說map文件相當(dāng)于是查看源碼的一個(gè)東西。如果不需要定位問題罐盔，并且不想被看到源碼但绕，就把productionSourceMap 置為false，既可以減少包大小惶看，也可以加密源碼捏顺。(第4個(gè))
- crossorigin:只有當(dāng)你的網(wǎng)頁域名和要載入的靜態(tài)文件存放的站點(diǎn)域名不一樣的時(shí)候,才有意義(第5個(gè))
- integrity:提高安全性(等以后)
- configureWebpack: Type: Object | Function(一個(gè)很有用,但是比較復(fù)雜的屬性,以后再說)
- chainWebpack:修改內(nèi)部的webpack配置(第7個(gè))
- css.requireModuleExtension:默認(rèn)情況下，只有 *.module.[ext] 結(jié)尾的文件才會(huì)被視作 CSS Modules 模塊纬黎。設(shè)置為 false 后你就可以去掉文件名中的 .module 并將所有的 *.(css|scss|sass|less|styl(us)?) 文件視為 CSS Modules 模塊幅骄。
Type: boolean Default: true
- css.extract:將組件內(nèi)的所有css提取出來組合成一個(gè)文件.
Type: boolean | Object Default: 生產(chǎn)環(huán)境下是 true，開發(fā)環(huán)境下是 false
- css.sourceMap:是否為 CSS 開啟 source map本今。設(shè)置為 true 之后可能會(huì)影響構(gòu)建的性能拆座。(map文件用來看源碼,不管他)
- css.loaderOptions:向 CSS 相關(guān)的 loader 傳遞選項(xiàng)(以后專門研究,第8個(gè))
- devServer:一個(gè)比較有用的服務(wù)器配置屬性,可以配置打開網(wǎng)頁的端口,是否自動(dòng)打開等等(第9個(gè))
- devServer.proxy:上面的屬性的一個(gè)子屬性
- parallel:生產(chǎn)構(gòu)建時(shí)有用,build,可以用來提高效率.
- pwa:給pwa插件傳遞選項(xiàng)(第10個(gè))
- pluginOptions:給所用插件提供選項(xiàng),即一些公共參數(shù).
// 定義一些公用參數(shù)主巍，以供項(xiàng)目中使用
const pluginOptions = {
// 項(xiàng)目名，定義成我們?cè)谠破脚_(tái)申請(qǐng)的應(yīng)用名挪凑，類似 ***.vivo.com.cn
projectName: 'huwd',
// 本地ip
host: ip.address(),
// 定義端口
port: 8080,
// 登錄的地址孕索，需要一個(gè)client_id
loginPath: 'https://psport.deio.com.cn/v3/web/login/authorze?client_id={client_id}',
// 埋點(diǎn)上報(bào)的地址
stPath: 'https://st-demss.reso.com.cn',
// CDN域名，在云平臺(tái)申請(qǐng)到的項(xiàng)目靜態(tài)資源域名
cdnPath: '/'
}
以上就是目前所有的選項(xiàng)
最后總結(jié)一下:當(dāng)前時(shí)間2020.12.4,上述選項(xiàng)共23個(gè),其中現(xiàn)在需要簡單理解或簡單記憶的有
publicPath(放置的路徑),outputDir(輸出路徑),assetsDir(生成靜態(tài)資源的路徑),
indexPath(index.html的路徑)filenameHashing(有關(guān)hash值),
runtimeCompiler(模板),runtimeonly,
css.extract(css提取).共7個(gè)
未來需要深入學(xué)習(xí)的有(優(yōu)先級(jí)由高到低):
configureWebpack,css.loaderOptions
pluginOptions,devServer,devServer.proxy
css.requireModuleExtension,parallel
productionSourceMap,css.sourceMap
pwa,chainWebpack
pages,lintOnSave,transpileDependencies,
找到實(shí)習(xí)(皇天不負(fù)有心人)以后看情況的:
crossorigin(需要服務(wù)器),integrity(安全性),
