vue-cli基礎(chǔ)配置及webpack配置修改的示例分析

這篇文章主要為大家展示了“vue-cli基礎(chǔ)配置及webpack配置修改的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue-cli基礎(chǔ)配置及webpack配置修改的示例分析”這篇文章吧。

腳手架

腳手架幫我們幫我們把 webpack 等相關(guān)的配置都處理好，我們只需要基于腳手架快速構(gòu)建一個(gè)項(xiàng)目即可(項(xiàng)目中一定包含webpack的相關(guān)配置)

vue腳手架  vue-cli

我們使用任何東西第一步都是安裝

1.安裝腳手架(一般安裝在全局)

//=>用npm安裝
$npm install @vue/cli -g
//=>用yarn安裝
$yarn global add @vue/cli

安裝成功后，全局環(huán)境會(huì)生成 $vue 的可執(zhí)行命令，我們可以基于 $vue --version 來查看版本號，看是否安裝成功

2.創(chuàng)建工程化項(xiàng)目

$vue create [項(xiàng)目名稱](要遵循npm包的名稱規(guī)范:數(shù)字或者小寫字母)

第一項(xiàng)是我之前創(chuàng)建保存的配置，如果是第一次創(chuàng)建就有第二項(xiàng)和第三項(xiàng)

• default (babel,eslint) ：選擇默認(rèn)配置項(xiàng)（后期自己安裝需要的模塊和進(jìn)行配置）

• Manually select features ：手動(dòng)選擇配置項(xiàng)

如果選擇默認(rèn)這篇文章就沒有意義了，我們選擇手動(dòng)選擇配置項(xiàng)

這里選擇腳手架里的webpack配置，空格鍵是選擇，我選擇了以上這些項(xiàng)，如果有需要自行添減

• babel（babel-preset-vue-app）：babel-preset-env最新的ECMAScript功能、轉(zhuǎn)換Vue JSX轉(zhuǎn)換generator和async/await等

• Router ：Vue官方的路由管理器

• Vuex ：Vue中實(shí)現(xiàn)公共狀態(tài)管理的插件 (處理組件之間的信息通信)

• Css Pre-processors ：CSS 預(yù)處理器（SASS/LESS/Stylus）

• Linter / Formatter ：eslint 語法檢測

• Unit Testing ：單元測試

• E2E Testing ：端到端測試

是否使用路由器的歷史模式，選擇Y；選擇哪個(gè)CSS 預(yù)處理語言的配置規(guī)則，我用的是less根據(jù)自己需要選擇

選擇自動(dòng)化代碼格式化檢測，我用的 vscode 選的 ESLint+Prettier

選擇第一個(gè)可以保存配置方便下次使用

• 第一個(gè)選項(xiàng)是把配置信息放到一個(gè)單獨(dú)的文件

• 第二項(xiàng)是放到package.json里

創(chuàng)建后的項(xiàng)目目錄

src ：項(xiàng)目開發(fā)源文件

• main.js ：打包編譯的入口文件

• App.vue ：項(xiàng)目頁面的入口文件

• components ：存放當(dāng)前項(xiàng)目的公共組件

• xxx.vue

• assets ：一般存放項(xiàng)目中需要引入的靜態(tài)資源文件

• xxx.png

• xxx.css

public

• index.html ：當(dāng)前項(xiàng)目的主頁面，我們最后把所有在src中寫的內(nèi)容，通過webpack、vue編譯渲染，最后呈現(xiàn)在index.html中的#app容器中

• xxx.xx ：有些時(shí)候我們的某些資源可能要單獨(dú)在index.html就引用了，將它放在此文件夾下，但是開發(fā)時(shí)除了這樣的資源，其余的都建議放在src文件夾中

開發(fā)模式下我們基于下面這個(gè)命令，啟動(dòng)一個(gè)本地服務(wù)，把基于webpack編譯后的內(nèi)容預(yù)覽

$npm run serve 或者 $yarn serve

生產(chǎn)模式下，把寫好的內(nèi)容進(jìn)行編譯打包，最后部署到服務(wù)器上

$npm run build 或者 $yarn build

vue-cli的其他命令

$vue inspect 查看當(dāng)前項(xiàng)目默認(rèn)的webpack配置信息
$vue add [plugin] 在當(dāng)前項(xiàng)目中安裝插件

$vue ui ：以圖形化界面創(chuàng)建和管理項(xiàng)目

會(huì)打開一個(gè)瀏覽器窗口，并以圖形化界面將你引導(dǎo)至項(xiàng)目創(chuàng)建的流程

$vue create --help ：可以查看vue中的命令

vue-cli的一點(diǎn)深入

創(chuàng)建項(xiàng)目后，默認(rèn)的配置中已經(jīng)把，例如：less/sass 等規(guī)則配好，如果我們的項(xiàng)目中需要使用less等，無需配置規(guī)則，只需要安裝對應(yīng)的模塊和加載器即可

$yarn add less less-loader -D

<script>
  impoer './xxx/xxx.xx' //=>導(dǎo)入需要的模塊
</script>

<style lang="less">
  ...../
</style>

修改默認(rèn)的webpack配置

需要在根目錄中創(chuàng)建 vue.config.js 文件，在這個(gè)文件中修改相關(guān)配置，下面代碼就是修改webpack的相關(guān)配置

  module.exports = {
	//=>process.env.NODE_ENV：環(huán)境變量中存儲的是開發(fā)環(huán)境還是生產(chǎn)環(huán)境
	publicPath: process.env.NODE_ENV === 'production' ? 'http://www.xxx.cn/' : '/',
	//=>outputDir
	//=>自定義目錄名稱，把生成的JS/CSS/圖片等靜態(tài)資源放置到這個(gè)目錄中
	assetsDir: 'assets',
	//=>關(guān)閉生產(chǎn)環(huán)境下的資源映射（生產(chǎn)環(huán)境下不在創(chuàng)建xxx.js.map文件）
	productionSourceMap: false,
	//=>設(shè)置一些webpack配置項(xiàng)，用這些配置項(xiàng)和默認(rèn)的配置項(xiàng)合并
	configureWebpack: {
		plugins: []
	},
	//=>直接去修改內(nèi)置的webpack配置項(xiàng)
	chainWebpack: config => {
		//=>config:原始配置信息對象
		config.module
			.rule('images')
			.use('url-loader')
			.loader('url-loader')
			.tap(options => {
				options.limit = 200 * 1024;
				return options;
			});
	},
	//=>修改webpack-dev-server配置（尤其是跨域代理）
	devServer: {
		proxy: {
			//請求地址 /user/add
			//代理地址 http://api.xxx.cn/user/add
			"/": {
				changeOrigin: true,
				target: "http://api.xxx.cn/"
			}
		}
	},
	//=>多余1核cpu時(shí)：啟動(dòng)并行壓縮
	parallel: require('os').cpus().length > 1
  }

以上是“vue-cli基礎(chǔ)配置及webpack配置修改的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！