如何查看vue項(xiàng)目的vue版本

本篇文章給大家分享的是有關(guān)如何查看vue項(xiàng)目的vue版本，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

查看cli版本，執(zhí)行如下：

vue -V

查看vue版本

npm list vue

補(bǔ)充知識(shí)：vue老項(xiàng)目升級(jí)vue-cli3.0問題總結(jié)

升級(jí)步驟

1、 刪除原vue-cli并安裝vue-cli3.0

2、刪除新項(xiàng)目中src下的內(nèi)容，把原項(xiàng)目中src目錄覆蓋到新項(xiàng)目中

3、把router從目錄文件夾改為文件，src/router/index.js提高一層變成src/router.js

4、 我的項(xiàng)目中src已經(jīng)分為了views和components所以無需修改，如果不是這個(gè)結(jié)構(gòu)需要自己區(qū)分下

5、將原項(xiàng)目的index.html及favicon.ico覆蓋到新項(xiàng)目的public中

6、 將原項(xiàng)目的static文件夾拷貝到新項(xiàng)目的public中

7、 修改package.json文件，保持和原有項(xiàng)目一致即可

8、 創(chuàng)建并配置vue.config.js文件

刪除命令：

npm uninstall vue-cli -g

安裝@vue/cli命令：

npm install -g @vue/cli

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

1、找不到vue文件

CMD中的報(bào)錯(cuò)

These dependencies were not found:

* @/views/index/index in ./src/router.js

* @/views/index/otherIndex in ./src/router.js

To install them, you can run: npm install --save @/views/index/index @/views/index/other

頁面上的報(bào)錯(cuò)

./src/router.js
Module not found:
Error: Can't resolve '@/views/index/index' in 'D:\VUE\haigui-proxy\src'
這種報(bào)錯(cuò)是說明文件路徑錯(cuò)誤沒有找到文件，因?yàn)樵谠?xiàng)目中設(shè)置了“@”也就是alias(別名)，也有可能在原項(xiàng)目中設(shè)置了extensions(可以省略擴(kuò)展名)，所以需要在新項(xiàng)目的vue.config.js中設(shè)置如下內(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的時(shí)候，可以使用這些別名，來縮短路徑的長度
   '@': 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'

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

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

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

引入圖片logo.png：

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

在 css 中 設(shè)置背景圖片：

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

注意：

public 目錄提供的是一個(gè)應(yīng)急手段，當(dāng)你通過絕對路徑引用它時(shí)，留意應(yīng)用將會(huì)部署到哪里。如果你的應(yīng)用沒有部署在域名的根部，那么你需要為你的 URL 配置 publicPath 前綴。

何時(shí)使用 public 文件夾

你需要在構(gòu)建輸出中指定一個(gè)文件的名字。

你有上千個(gè)圖片，需要?jiǎng)討B(tài)引用它們的路徑。

有些庫可能和 webpack 不兼容，這時(shí)你除了將其用一個(gè)獨(dú)立的 標(biāo)簽引入沒有別的選擇。

通過 webpack 的處理好處：

腳本和樣式表會(huì)被壓縮且打包在一起，從而避免額外的網(wǎng)絡(luò)請求。

文件丟失會(huì)直接在編譯時(shí)報(bào)錯(cuò)，而不是到了用戶端才產(chǎn)生 404 錯(cuò)誤。

最終生成的文件名包含了內(nèi)容哈希，因此你不必?fù)?dān)心瀏覽器會(huì)緩存它們的老版本。

public 目錄提供的是一個(gè)應(yīng)急手段，當(dāng)你通過絕對路徑引用它時(shí)，留意應(yīng)用將會(huì)部署到哪里。

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

需要使用相對路徑引入：

<!-- 具體根據(jù)目錄結(jié)構(gòu)來 -->

<img src="../assets/images/logo-black.png">

img動(dòng)態(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)

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

在原項(xiàng)目中需要在build/utils.js中進(jìn)行配置

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

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

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

4、runtime-only

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

原因：

vue有兩種形式的代碼 compiler（模板）模式和runtime模式（運(yùn)行時(shí)），vue模塊的package.json的main字段默認(rèn)為runtime模式， 指向了"dist/vue.runtime.common.js"位置。

這是vue升級(jí)到2.0之后就有的特點(diǎn)。

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

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的呀？

這也是第二種解決辦法：

因?yàn)橹拔覀兊膚ebpack配置文件里有個(gè)別名配置，具體如下

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

也就是說，import Vue from ‘vue' 這行代碼被解析為 import Vue from ‘vue/dist/vue.esm.js'，直接指定了文件的位置，沒有使用main字段默認(rèn)的文件位置。

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

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

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

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

以上就是如何查看vue項(xiàng)目的vue版本，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。