It does not work to use Vue in index.html under webpack

without Webpack:
this simple example is fine. Open it on the browser and you can see "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: "-sharpapp",
            data: {
                msg: "hello"
            }
        });
    </script>

</html>

then under Webpack, it is still a simple example, and it is not feasible. The browser changes from "{{msg}}" to nothing and console does not report any errors.

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: "-sharpapp",
        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 configuration

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: "-sharpeval-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;
Mar.09,2021

according to your classification, there are two cases, the first is to introduce vue.js, directly, and the second is to use webpack to package .vue single-file components.

  1. in the first case, the browser opens the console and looks at the source code in Sources, and you can see {{msg}}. In general, html, packaged with .vue only contains < div-sharpapp > < / div >, but does not include {{}}. If it contains {{}}, an error will be reported. This is because the version of vue referenced in the two cases is different.
  2. vue is roughly divided into two versions, vue.js and vue.runtime.js. There is a difference in the official document, which you can see for yourself. It's roughly vue.js = vue.runtime.js + compile. This compile is responsible for traversing the {{}}, vue instructions (such as v-if) in the html, and then translating it into the corresponding vNode (virtual DOM).
  3. while single file components generally use vue.runtime.js, with vue.runtime.js has two advantages. Because this version does not include the smaller size of compile, (benefit 1), you only need to use vue-loader to translate .vue into vNode in advance, so that the page can be seen by client browsers without compile (benefit 2, users can see the page faster). This is why there is only < div id= "- sharpapp" > < / div > in the console in this case.
  4. In the second case of
  5. , instead of writing < div id= "- sharpapp" > < / div > directly in your index.html, it also contains {{}}, but the file is not pre-compiled by webpack with vue-loader, webpack just packages .vue and so on into bundle.js through the entry file and puts it into this index.html. So your index.html to the client, there is still {{}. So it initially appears as {{}}-as the content in the native html, and then suddenly disappears, presumably because the vue.runtime.js runtime overwrites the content in < div id= "- sharpapp" > < / div >.

what does the console output
I think the compilation error here is that there is no configuration

it is recommended to improve the webpack configuration
clipboard.png

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b323a4-2be13.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b323a4-2be13.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?