神奇的vue引入

最近弄项目想引入vue，通过import的方式出现了问题，但是通过外链的方式却不会，其中报错如下：

[Vue warn]: 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.

问号脸? 明明import引入的方式很多的例子中都有在用啊，让人费解？甚至我将代码全部替换成例子中的代码依旧无法运行，但在 vue-router 项目里就能跑！

虽然通过外链的方式可以用，但我并不想丢下这个疑惑，于是一番查验得出我import的和他们import的根本不一样！

import vue from 'vue'

同样的 import 语句，却有不一样的结果，vue-router 中引的是 vue.js，而在我的项目中引的竟然是 vue.common.js...common...mon...n...

为什么会引 vue.common.js，from 'vue' 不该引的是 vue.js 么？这就要引入另一个知识点：package.json。

package.json 中的 main 属性决定了，当项目被引入时，输出的是哪个文件，而 vue 的 package.json 中的 main 指向的是 dist/vue.common.js。

解决方法1：

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

解决方法2：

• 如果直接用npm run build命令来打包，在webpack.config.js中设置vue的别名

module.exports = {
    // 省略...
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }
}

• 如果是用gulp配合'webpack-stream'模块来打包，在gulpfile.js中设置vue的别名

 gulp.task('webpack-'+key,function () {
            return gulp.src(entry[key])
            .pipe(webpackStream({
                output:{
                    filename:'js/'+key+'.bundle.js'//打包后的名字
                },
                resolve: {
                    alias: {
                        vue: 'vue/dist/vue.js'
                    }
                }
            }))
            .pipe(gulp.dest('./public/dist'));
    });

 通过以上两种方法随意一种，都可以愉快的在项目中用 import vue from 'vue'