Nuxtjs 2.0 升級爬坑
當我在升級 Nuxt2.0 的過程，遇到了很多問題，逐一查詢解決，廢了不少時間。回頭想想，真希望在升級的時候看到這樣一篇文章，讓我少走一些彎路。
這篇文章的意義也在於此，希望對大家能有所幫助。
一、為什麼要從Nuxt1.0
升級到Nuxt2.0
？
我們來看看Nuxt2.0
有哪些更新
：
1.支援webpack4
webpack4
有很多優化的提升，升級後就可以嗨皮的使用了。
2.棄掉了venders
我們以前一直使用vendors chunk
，這次釋出後，我們不再使用CommonsChunkPlugin
，所以不必明確指定vendors
。
Nuxt
自動添加了核心的packages
(包括vue
,vue-router
,babel-runtime
…)到Cache Group
中。
這使得webpack
可以用最合理的方式拆分你的程式碼。
3.chunk splitting
的完全控制
儘管nuxt
試圖提供最有效的分割，但現在可以使用build.splitChunks
選項完全控制它，並且可以選擇禁用每個路由的非同步塊。
4.Vue Loader 15 and mini-css-extract-plugin
Vue-Loader 15
進行了完全的重寫，它使用了一種完全不同的新架構，能夠將webpack
配置中定義的任何規則應用於*.vue
檔案內。
對於CSS
抽取，使用一個新的外掛mini-css-extract-plugin
，它支援CSS
和SourceMaps
（CSS splitting
）的按需載入，並構建在新的webpack v4
特性（module types
）上。
5.nuxt es modules
我們可以在nuxt.config.js
中使用import
,export
, 伺服器middleware
,modules
。
6.CLI
改善
nuxt2.0
自動檢測配置項和測試環境，並將切換到一個稱為minimalCLI
的特殊模式，其中包含更少的詳細訊息。
二、升級 2.0
npm install nuxt@latest
三、記得重新安裝一下依賴
npm i
四、升級問題
問題一：
Module build failed: TypeError: Cannot read property 'eslint' of undefined
碰到這個問題，是因為isClient
新版本已經移除了，我們試著理解一下
：
isClient was removed in nuxt-edge, it should be replaced by process.client in your nuxt.config.js as below.
Nuxtjs1.0
我們是這麼用：
extend(config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
});
}
所以應該修改成：
extend (config, { isDev }) {
if (isDev && process.client) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
注意 isClient 和 process.client！
問題二：
ERRORFailed to compile with 1 errors
errorin ./.nuxt/router.js
Module parse failed: Unexpected token (24:8)
You may need an appropriate loader to handle this file type.
|
| var _5f05608f = function _5f05608f() {
>return import('../pages/account/index.vue' /* webpackChunkName: "pages/account/index" */).then(function (m) {
|return m.default || m;
|});
@ ./.nuxt/index.js 334:14-36
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
碰到這個問題，應該是某些包不相容，所以可以先清除node_modules
，重新安裝：
rm -rf node_modules/ npm i
問題三：
Error: Plugin/Preset files are not allowed to export objects, only functions
這個問題是因為Babel7
的更新，所以我們需要更新配置檔案
：
首先修改package.json
：
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
}
接著更改nuxt.config.js
，如果使用了動態匯入，需要注意如下配置
：
presets: ['@babel/env', '@babel/react'], plugins: [ '@babel/plugin-syntax-dynamic-import' ]
問題四：
This dependency was not found: vant/lib/vant-css/index.css in ./plugins/vant.js import 'vant/lib/vant-css/index.css';
我們發現升級後，第三方UI
庫的樣式找不到了，通過查詢，發現是檔案引用路徑
發生了變化：
import Vue from 'vue’; import Vant from 'vant’; import 'vant/lib/index.css’; Vue.use(Vant);
問題五：靜態資源載入異常
這個異常很明顯，圖片全部訪問不了了，所以一定要注意看看Nuxt2.0
做了哪些更改
。
請注意: 從Nuxt2.0
開始，~/alias
將無法在CSS
檔案中正確解析。你必須在url CSS
引用中使用~assets
（沒有斜槓）或@
別名，即background:url("~assets/banner.svg")
問題六：
WARNUsing an Array as build.postcss will be deprecated in Nuxt 3. Please switch to the object declaration
意思很明瞭，postcss 以後需要用物件宣告 ，不再支援陣列方式。
我們將：
postcss: [
require("postcss-px2rem-exclude")({
remUnit: 75,
exclude: /node_modules|vant/
}),
require('autoprefixer')({
browsers: ['Android >= 4.0', 'iOS >= 7']
})
],
替換成：
postcss: {
'postcss-px2rem-exclude': {
emUnit: 75,
exclude: '/node_modules|vant/'
},
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7’]
}
},
問題七：
ReferenceError：regeneratorRuntime is not defined
需要增加 babel執行時編譯
，配置package.json
：
"babel-plugin-transform-runtime": "^6.23.0",
修改nuxt.config.js
中的配置：
plugins: [ '@babel/plugin-syntax-dynamic-import', '@babel/transform-runtime' ]
問題八：
EACCES: permission denied, mkdir '/Users/jartto/Documents/project/primary-station/node_modules/.cache’
使用sudo
啟動，例如：
sudo npm run start
問題九：
ERROR in Sentry CLI Plugin: Command failed: /apps/srv/instance/test-touch.gaotu100.com/node_modules/@sentry/cli/sentry-cli releases new 2.4.0 error: An organization slug is required (provide with --org) Add --log-level=[info|debug] or export SENTRY_LOG_LEVEL=[info|debug] to see more output. Please attach the full debug log to all bug reports.
這個問題類似和問題一一樣，注意替換isClient
。