vue cli 3x 發(fā)布已經(jīng)有好長一段時間了，webpack 4x 現(xiàn)在版本已經(jīng)到了 4.28.0；如果你現(xiàn)在用或者不用手腳架搭建項目，我都推薦你使用 webpack 4x，體驗一把新技術(shù)帶來的變化。我們可以用穩(wěn)定版本的，穩(wěn)定版本一般是沒有問題，如果有問題，恭喜你，你推動了社區(qū)的發(fā)展。我們在一個好時代有問題可以作者提 issue 或者 pull requests

我也體驗一把 vue cli 3x 手腳架構(gòu)建項目，拿公司的一個移動端小項目試驗了一把。結(jié)果有點(diǎn)讓我有點(diǎn)吃驚。公司項目使用的是 npm 命令，我 vue cli 3x 構(gòu)建用的是 yarn，這個應(yīng)該不影響。還有一點(diǎn)點(diǎn)區(qū)別是公司項目沒有用 CDN ，我在構(gòu)建的時候順便項目優(yōu)化了一下使用了這個 CDN（ "vue-router": "VueRouter","element-ui": "ELEMENT",'v-charts':'VCharts','echarts': 'echarts'），其他地方就沒有區(qū)別了。但是總的來說肯定是 webpack 4x 比之前更好，要不然他版本升級意義在哪呢？

vue cli 2x 和 vue cli 3x 項目結(jié)構(gòu)差別：少了build 和 config 文件。如果我們需要另外配置環(huán)境直接寫.env.XXX，修改配置文件直接新建vue.config.js 在里面配置。打包的時候直接傳入 --mode XXX 就打包了不同的環(huán)境了。我更喜歡新版本，看上去簡潔 注：

h5-web-app 是 vue cli 2x 構(gòu)建的 "webpack": "^3.6.0"

mobile 是 vue cli 3x 構(gòu)建的 "version": "4.26.1"

整體看上去沒有那么笨重，很多事情 vue 都幫我們做了

vue.config.js 文件大致內(nèi)容

build 項目第一次

build 項目第二次

打包后占用內(nèi)存

本地啟動項目（前后兩次）

首頁加載時間

vue cli 3x

vue cli 2x

一頓折騰，前后對比還是能看到具體的數(shù)據(jù)差別的。我是初學(xué)者，如有什么地方不對，請指出，愿意學(xué)習(xí)改進(jìn)。目前我司線上是沒有優(yōu)化的。

我個人認(rèn)為 webpack 構(gòu)建速度還是蠻重要的，深刻體會。實在是受不了每次編譯所要等待時間，自己動手嘗試了一下，新版本給我?guī)淼母惺堋＞W(wǎng)傳

夸張不夸張我不知道，但是自身體驗有明顯感覺到。

附上一份自己整理的 webpack 4x 的配置和 vue cli 3x 的配置

vue.config.js

const path = require('path') //去console插件 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') //gzip壓縮插件 const CompressionWebpackPlugin = require('compression-webpack-plugin')function resolve(dir) {return path.join(__dirname, dir) } module.exports = {outputDir: process.env.outputDir,devServer: {proxy: {'/api': {target: 'http://192.168.0.001:8080',ws: true,changeOrigin: true,pathRewrite: {'^/api': ''}},'/gateApi': {target: 'http://192.168.0.002:8080',changeOrigin: true,pathRewrite: {'^/api': ''}},'/xsApi': {target: 'http://192.168.0.003:8080',changeOrigin: true,pathRewrite: {'^/xsApi': ''}}}},configureWebpack: config => {config.externals={vue: "Vue",vuex: "Vuex","vue-router": "VueRouter","element-ui": "ELEMENT",'v-charts':'VCharts','echarts': 'echarts',}let plugins = [new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false,drop_debugger: true,drop_console: true,},},sourceMap: false,parallel: true,}),new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' + ['js', 'css'].join('|') +')$',),threshold: 10240,minRatio: 0.8,}),]if (process.env.NODE_ENV !== 'development') {//在開發(fā)環(huán)境不壓縮，有console日志config.plugins = [...config.plugins, ...plugins]}},lintOnSave: true,chainWebpack: (config) => {//配置別名config.resolve.alias.set('@', resolve('src')).set('@assets', resolve('src/assets')).set('@constant', resolve('src/constants')).set('@components', resolve('src/components')).set('@base', resolve('src/base')).set('@api', resolve('src/api')).set('@common', resolve('src/common')).set('@utils', resolve('src/utils')).set('@router', resolve('src/router')).set('@store', resolve('src/store')).set('@mixin', resolve('src/mixin')).set('@img', resolve('public/img'))} }復(fù)制代碼

在我們實際的項目中，肯定是需要配置不同的環(huán)境的。在環(huán)境這一塊我也是折騰了好長一段時間，求助各路朋友才弄明白了。菜雞一個看不懂文檔，也很無奈。記錄這一路踩的坑

多環(huán)境打包不同的文件

npm run build 會讀取 .env.production 文件里面的配置的變量 npm run Devbuild 會讀取 .env.dev 文件里面的配置的變量

注意了:只有以VUE_APP_開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中。我在這個問題上卡殼一個上午，因為沒有加VUE_APP_，總是獲取不到不同環(huán)境的不同變量

2.pm2 啟動項目（記錄給自己看） 我只試過pm2 啟動，其他的沒有試，也就不懂。pm2 啟動項目使用http proxy 做代理，所以也需要環(huán)境，這時候我們就可以直接用vue.config.js里面的就好了（好像說不清，來張截圖吧）

好像是說完了，最后說說這次折騰的感受吧，項目體驗就不說了。這次明白了幾個小小的知識點(diǎn)

1.mac自帶了python2.7 打包之后進(jìn)入打包文件 dist 可以用python -m SimpleHTTPServer 80 啟動項目，和好像和 pm2 效果一樣的，

2.知道了一點(diǎn)點(diǎn)關(guān)于SSR 的知識點(diǎn) 是把這個工作放在服務(wù)器端做，直接在服務(wù)器端生成你想要的最終的頁面，然后返回給瀏覽器，可以做SEO優(yōu)化和首屏加載速度優(yōu)化

3.怎么看錯誤日志，定位然后解決問題

4.netstat -an | grep 8081 和 lsof -nP -i tcp | grep node 這兩個命令應(yīng)該是看端口號上面的吧

我是初學(xué)者，很多地方不懂，說的不對，請多多指導(dǎo)。讓我長點(diǎn)知識

---

我領(lǐng)導(dǎo)給我補(bǔ)充了一個知識點(diǎn)：瀏覽器在請求文件或者接口的時候，不同的域名可以并發(fā)進(jìn)行，解釋了上面 mobile 項目請求的時候為什么同一時間可以加載多個文件，這可能也是優(yōu)化首頁加載速度的知識點(diǎn)。

總結(jié)

以上是生活随笔為你收集整理的体验 vue cli 3.0的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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