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

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

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

h5-web-app 是 vue cli 2x 構建的 "webpack": "^3.6.0"

mobile 是 vue cli 3x 構建的 "version": "4.26.1"

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

vue.config.js 文件大致內容

build 項目第一次

build 項目第二次

打包后占用內存

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

首頁加載時間

vue cli 3x

vue cli 2x

一頓折騰，前后對比還是能看到具體的數據差別的。我是初學者，如有什么地方不對，請指出，愿意學習改進。目前我司線上是沒有優化的。

我個人認為 webpack 構建速度還是蠻重要的，深刻體會。實在是受不了每次編譯所要等待時間，自己動手嘗試了一下，新版本給我帶來的感受。網傳

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

附上一份自己整理的 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') {//在開發環境不壓縮，有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'))} }復制代碼

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

多環境打包不同的文件

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

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

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

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

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

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

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

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

我是初學者，很多地方不懂，說的不對，請多多指導。讓我長點知識

---

我領導給我補充了一個知識點：瀏覽器在請求文件或者接口的時候，不同的域名可以并發進行，解釋了上面 mobile 項目請求的時候為什么同一時間可以加載多個文件，這可能也是優化首頁加載速度的知識點。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。