vue老項目升級vue-cli3.0問題總結【轉(zhuǎn)發(fā)】

升級步驟
1齐苛、 刪除原vue-cli并安裝vue-cli3.0
2怔匣、刪除新項目中src下的內(nèi)容稚伍，把原項目中src目錄覆蓋到新項目中
3劲够、把router從目錄文件夾改為文件，src/router/index.js提高一層變成src/router.js
4煤辨、 我的項目中src已經(jīng)分為了views和components所以無需修改称鳞，如果不是這個結構需要自己區(qū)分下
5纤壁、將原項目的index.html及favicon.ico覆蓋到新項目的public中
6雅镊、 將原項目的static文件夾拷貝到新項目的public中
7襟雷、 修改package.json文件，保持和原有項目一致即可
8仁烹、 創(chuàng)建并配置vue.config.js文件

刪除命令：

npm uninstall vue-cli -g

安裝@vue/cli命令：

npm install -g @vue/cli

我在這里省略安裝流程耸弄，掘金上已經(jīng)有很多文章了，下面說下會遇到的問題：

1卓缰、找不到vue文件

CMD中的報錯

These dependencies were not found:* @/views/index/index in ./src/router.js* @/views/index/otherIndex in ./src/router.jsTo install them, you can run: npm install --save @/views/index/index @/views/index/other

頁面上的報錯

./src/router.jsModule not found:Error: Can't resolve '@/views/index/index' in 'D:\VUE\haigui-proxy\src'

這種報錯是說明文件路徑錯誤沒有找到文件计呈，因為在原項目中設置了“@”也就是alias(別名)，也有可能在原項目中設置了extensions(可以省略擴展名)僚饭，所以需要在新項目的vue.config.js中設置如下內(nèi)容：

const path = require('path'); // vue.config.js頂部const resolve = (dir) => path.join(__dirname, dir);module.exports = {  configureWebpack: config => {    Object.assign(config, {      resolve: {        extensions: ['.js', '.vue', '.json'], // 可以省略后綴名        alias: { // 別名,在require的時候震叮，可以使用這些別名胧砰，來縮短路徑的長度          '@': path.resolve(__dirname, './src'),          '@c': path.resolve(__dirname, './src/components')        }      }    });  }}

2鳍鸵、找不到image圖片

Module not found:Error: Can't resolve '../../../static/image/avatar_gray.jpg' in 'D:\VUE\haigui-proxy\src\views\index'

當把原項目的src和static拷貝到新項目后，就會出現(xiàn)圖片路徑不對的問題尉间，網(wǎng)上很多有關vue-cli3.0配置的文章都說的是把原項目的static直接拷貝到新項目的public中偿乖，其實這是不對，官方給出的原因是：

任何放置在 public 文件夾的靜態(tài)資源都會被簡單的復制哲嘲，而不經(jīng)過 webpack贪薪。需要通過絕對路徑來引用它們。

例如眠副，目錄為public/static/image画切，image里面存放各種圖片：

引入圖片logo.png:

<img src="/static/image/logo.png" >

在 css 中設置背景圖片：

.bg {  background: url('/satic/image/bg.jpg');}

注意:

public ****目錄提供的是一個應急手段，當你通過絕對路徑引用它時囱怕，留意應用將會部署到哪里霍弹。如果你的應用沒有部署在域名的根部毫别，那么你需要為你的 URL 配置 publicPath 前綴。

何時使用 public 文件夾

你需要在構建輸出中指定一個文件的名字典格。
你有上千個圖片岛宦，需要動態(tài)引用它們的路徑。
有些庫可能和 webpack 不兼容耍缴，這時你除了將其用一個獨立的標簽引入沒有別的選擇砾肺。

通過 webpack 的處理好處：

腳本和樣式表會被壓縮且打包在一起，從而避免額外的網(wǎng)絡請求防嗡。
文件丟失會直接在編譯時報錯变汪，而不是到了用戶端才產(chǎn)生 404 錯誤。
最終生成的文件名包含了內(nèi)容哈希蚁趁，因此你不必擔心瀏覽器會緩存它們的老版本疫衩。
public 目錄提供的是一個應急手段，當你通過絕對路徑引用它時荣德，留意應用將會部署到哪里闷煤。

assets****文件夾就是用來放置經(jīng)過webpack處理的資源的

需要使用相對路徑引入：

<!-- 具體根據(jù)目錄結構來 --><img src="../assets/images/logo-black.png">

img動態(tài)路徑：

<img :src="imgurl">data () {  return {        imgurl: require("../assets/images/gou.png")    }}

css 背景圖：

.login-wrapper {  background: url('../../assets/images/bg.jpg');}

參考：官方解釋

3、scss全局變量的配置

Module build failed (from ./node_modules/sass-loader/lib/loader.js):Undefined variable.  955 │        border-right: 1px solid $borderColor;                            ^^^^^^^^^^^^root stylesheet in D:\VUE\haigui-proxy\src\views\index\index.vue (line 955, column 33)

若原項目中使用了scss并且使用了全局變量涮瞻，需要在vue.config.js中重新配置鲤拿，并把全局變量文件放到src/assets/css目錄下。

在原項目中需要在build/utils.js中進行配置

scss: generateLoaders('sass').concat(  {    loader: 'sass-resources-loader',    options: {      resources: path.resolve(__dirname, '../src/assets/css/haigui-variable.scss')    }  })

新項目中就簡單的多署咽，直接編輯vue.config.js近顷，加入一節(jié)內(nèi)容即可：

css: {  loaderOptions: {    sass: {      // @/ 是 src/ 的別名 ~是必須有要加的      data: '@import "~@/assets/css/haigui-variable";'      // 如果沒有設置別名可以這么寫      // data: '@import "./src/assets/css/haigui-variable";'    }  }}

4、runtime-only

You are using the runtime-only build of Vue where the template compiler is notavailable. Either pre-compile the templates into render functions, or use thecompiler-included build.

原因：vue有兩種形式的代碼 compiler（模板）模式和runtime模式（運行時）宁否，vue模塊的package.json的main字段默認為runtime模式窒升，指向了"dist/vue.runtime.common.js"位置。

這是vue升級到2.0之后就有的特點慕匠。

而在main.js文件中饱须，初始化vue卻是這么寫的，這種形式為compiler模式的台谊，所以就會出現(xiàn)上面的錯誤信息蓉媳。

new Vue({  el: '#app',  router,  store,  components: { App },  template: '<App/>'});

解決辦法：

方法一：將main.js中的代碼修改如下就可以

new Vue({  router,  store,  render: h => h(App)}).$mount('#app')

到這里我們的問題還沒完，那為什么之前是沒問題的锅铅，之前vue版本也是2.x的呀酪呻？

這也是第二種解決辦法：因為之前我們的webpack配置文件里有個別名配置，具體如下

resolve: {  alias: {      'vue$': 'vue/dist/vue.esm.js' //內(nèi)部為正則表達式 vue結尾的  }}

也就是說盐须，import Vue from ‘vue’ 這行代碼被解析為 import Vue from ‘vue/dist/vue.esm.js’玩荠，直接指定了文件的位置，沒有使用main字段默認的文件位置。

所以第二種解決方法就是阶冈，在vue.config.js文件里加上webpack的如下配置即可屉凯，

configureWebpack: {  resolve: {    alias: {      'vue$': 'vue/dist/vue.esm.js'     }  }}

既然到了這里就會想到第三中解決方法，那就是在引用vue時眼溶，直接寫成如下即可

import Vue from 'vue/dist/vue.esm.js'