webpack下在index.html使用Vue不起作用

在不用Webpack的情況下：
這個(gè)簡(jiǎn)單的例子是可以的。在瀏覽器上打開(kāi)可以看到 "hello"

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
    <title>Test</title>
</head>

<body>
    <div id="app">
        {{ msg }}
    </div>

    <script> 
        console.log('html init') 
        new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            }
        });
    </script>

</html>

然后在Webpack下，依然是一個(gè)簡(jiǎn)單的例子，就不可行了。瀏覽器會(huì)從"{{ msg }}"變?yōu)槭裁炊伎床坏?，console也不報(bào)任何錯(cuò)誤。

index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>

<body>
    <div id="app">
        {{ msg }}
    </div>

    <script> console.log('html init') </script>

</html>

index.js:

import Vue from 'vue';
console.log("init");
window.onload = function () {
    console.log("onload...")
    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        }
    });
}

package.json:

{
    "name": "vue_sample",
    "version": "1.0.0",
    "main": "index.js",
    "description": "",
    "scripts": {
        "dev": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js",
        "build": "node node_modules/webpack/bin/webpack.js --config webpack.config.production.js"
    },
    "dependencies": {
        "copy-webpack-plugin": "^4.5.1",
        "update": "^0.7.4"
    },
    "devDependencies": {
        "babel-core": "^6.22.1",
        "babel-loader": "^7.1.2",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.2.1",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "babel-runtime": "^6.23.0",
        "webpack": "^4.1.1",
        "webpack-cli": "^2.0.11",
        "webpack-dev-server": "^3.1.1",
        "css-loader": "^0.28.10",
        "file-loader": "^1.1.11",
        "url-loader": "^1.0.1",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.0.6",
        "vue": "^2.5.15",
        "vue-html-loader": "^1.2.4",
        "vue-loader": "^14.2.1",
        "vue-template-compiler": "^2.5.15"
    },
    "license": "MIT",
    "author": "xxx"
}

webpack 配置

const path  = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'./dist'), 
        filename:'[name].js',
    },
    resolve:{
        extensions:[".js",".json",".jsx",".css",'.vue']
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/(node_modules|bower_components)/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['env'],
                        // 由babel-plugin-transform-runtime提供
                        plugins:['transform-runtime']
                    }
                }
            },
            {test:/\.vue$/,use:'vue-loader'},
            {test:/\.css$/,use:['vue-style-loader','style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|svgz)$/,
                use:{
                    loader: 'file-loader',
                    options: {
                      name: 'assets/images/[name].[ext]?[hash]'
                    }
                }
            },
        ]
           
    },
    devtool: '#eval-source-map',
    plugins:[
        new HtmlWebpackPlugin({template:'./src/index.html'}),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        historyApiFallback: true,
        noInfo: true,
        overlay: true,
        port:38080,
        hot:true,
        inline:true,
        open:false
    }
}

module.exports = config;

回答

編輯回答

大濕胸

按照你的分類(lèi)，分2種情況，第一種是直接引入vue.js, 第二種是使用webpack打包.vue的單文件組件。

第一種情況下，瀏覽器打開(kāi)控制臺(tái)，Sources里看源碼，可以看到{{msg}}，而.vue打包后的html，一般body里只有<div #app></div>這種，不包含{{}}, 如果包含{{}}, 會(huì)報(bào)錯(cuò)。這是因?yàn)?種情況下引用的vue版本不一樣。
vue大致分2個(gè)版本，vue.js 和 vue.runtime.js。官方文檔里說(shuō)了區(qū)別，具體你可以自己查看。大致是vue.js = vue.runtime.js + compile。這個(gè)compile負(fù)責(zé)遍歷html里的{{}}，vue指令（比如v-if），然后翻譯成對(duì)應(yīng)的vNode(虛擬DOM)。
而單文件組件一般用的是vue.runtime.js，用vue.runtime.js有2個(gè)好處。因?yàn)檫@本版本不包含compile, 體積更?。ê锰?），只需要提前用vue-loader將.vue翻譯成vNode就行了，這樣在客戶端瀏覽器就不用compile后才能看到頁(yè)面了（好處2, 用戶看到頁(yè)面更快）。這也是為什么這種情況下控制臺(tái)里html里只有<div id="#app"></div>。
第二種情況下，你的index.html里，不是直接寫(xiě)<div id="#app"></div>，還含有{{}}, 但是該文件并不會(huì)被webpack用vue-loader提前編譯，webpack只是通過(guò)入口文件把.vue等打包成bundle.js然后放到這個(gè)index.html里。所以你的index.html到客戶端，是依然是有{{}的。所以最開(kāi)始會(huì)顯示為{{}}——以原生html里內(nèi)容顯示，而之后又突然消失，猜測(cè)是因?yàn)関ue.runtime.js運(yùn)行時(shí)，將<div id="#app"></div>里內(nèi)容進(jìn)行了覆蓋。

2017年12月1日 04:31

編輯回答