對(duì)于網(wǎng)站建設(shè)公司來(lái)講在main中引入vue因?yàn)闆](méi)有確切的指定版本，所以他會(huì)默認(rèn)導(dǎo)入運(yùn)行時(shí)版本（不具有編譯功能），我們有兩種解決方法，第一種就是指定確切版本，第二種就是在 webpack.config.js 配置好命令，使導(dǎo)入vue就是導(dǎo)入完整版的vue.js。

1、項(xiàng)目結(jié)構(gòu)

因此把Hello.vue重命名為App.vue；src文件夾下添加router.js文件；src 文件夾下添加 components 文件夾，項(xiàng)目大還可以在components 文件夾下再進(jìn)行組件分類(lèi)，建立不同的文件夾。

index.html 文件 body 節(jié)中添加:

<!-- 這是 vue 的入口 -->

<div id=“app”></div>

2、下載安裝 vue，這里指定版本

3、如何引用 vue 文件【編寫(xiě) main.js 文件代碼】

原來(lái)我們都是通過(guò)下面代碼引入 vue。
<script src=“js/vue.js”></script>
現(xiàn)在我們只要在 main.js 把 vue 作為一個(gè)組件引入即:

4、打包項(xiàng)目 npm start

之后打開(kāi)打包后的文件 bundle.js 文件。有 9000 多行代碼，把vue 文件內(nèi)容都打包進(jìn)去了。打開(kāi)打包后的index.htm（l 即是 dist目錄下的 index.html 文件），多了下面一句。

<script type=“text/javascript” src=“bundle.js”></script>

5、運(yùn)行 index.html

訪問(wèn) dist/index.html ，發(fā)現(xiàn)App組件沒(méi)有被渲染出來(lái)，按 F12查看控制臺(tái)發(fā)現(xiàn)報(bào)警告：

這種方法導(dǎo)入的 vue 不是完整版本，對(duì)于網(wǎng)站建設(shè)公司來(lái)說(shuō)，不具有編譯功能，即不能對(duì) App.vue 進(jìn)行編譯,而我們需要編譯成瀏覽器能夠識(shí)別的 js 代碼，這種方法導(dǎo)入是運(yùn)行時(shí)版本。也就是說(shuō)，template 渲染的字符串，運(yùn)行時(shí)版本 vue 無(wú)法解析。

為什么說(shuō)默認(rèn)導(dǎo)入的是運(yùn)行時(shí)版本的 vue 呢？因?yàn)閕mport Vue from ‘vue’ 導(dǎo)入的 vue 文件默認(rèn)是node_modulesvue package.json 中的 main 屬性指定的文件，可以發(fā)現(xiàn)它并不是我們熟悉的 vue.js 完整版文件，import 的是運(yùn)行時(shí)版本

【 “main”:“dist/vue.runtime.common.js”】，不是完整版。

但是我們不好對(duì)安裝的依賴(lài)文件夾下的 node_modulesvue package.json 中的 main 屬性進(jìn)行修改，因?yàn)橹灰罄m(xù)用戶(hù)一安裝那個(gè) vue 就會(huì)覆蓋了。那怎么辦呢？

6、解決組件內(nèi)容沒(méi)有渲染出來(lái)

因?yàn)槟J(rèn) main.js 文件中導(dǎo)入的不是 vue 完整版，下面提供 2種解決方案：

第 1 種解決方法：

就在 main.js 文件中把導(dǎo)入的 vue 改為完整版本，即如下：

import Vue from ‘vue/dist/vue.js’

這里 vue 自然會(huì)找到根目錄下的 node_modules 文件夾下的 vue。然后重新打包 npm start，完了之后可以查看下打包后的

bundle.js 文件發(fā)現(xiàn)有 12000 多行，就是因?yàn)檫@時(shí)打包的是完整版的vue.js。最后再重新運(yùn)行 dist/index.html,發(fā)現(xiàn) App.vue 組件中的內(nèi)容渲染出來(lái)了。

但是這種解決方案不是很好的。用的不多

第 2 種解決方案：

（1）main.js 導(dǎo)入 vue 的代碼保持不變

import Vue from ‘vue’

（2）在 webpack.config.js 增加一個(gè)屬性,放在最后一個(gè) } 前即可。

……

, // 去引用完整版 vue.js

resolve:

{

alias:

{ ‘vue$’: ‘vue/dist/vue.js’ }

}

}

重新打包，npm start，打包之后之后可以查看下打包后的bundle.js 文件發(fā)現(xiàn)有 12000 多行，就是因?yàn)檫@時(shí)打包的是完整版的vue.js。最后重新運(yùn)行下 dist/index.html，發(fā)現(xiàn) App.vue 組件中的內(nèi)容渲染出來(lái)了。