Python工程师服务端开发就业面试高级视频教程

需要学习资源，请点击开挂教学楼

I am new to Vue and this is my first time manually configuring webpack. My previous experiences with webpack always had it abstracted behind another framework, i.e. webpack as part of create-react-app. The issue is that my new configuration doesn't work. As a sidenote, this is all part of a Hugo site.

My previous configuration but my new one doesn't.

Previous configuration:

there are 2 pages with 2 separate Vue apps
Vue loaded through CDN

Notes:

Hugo is used (might move away from this soon)
As part of the hugo structure, the source JS files are in the static/js directory, and the served files are in public/js

list.html:

<head>
    <script src="vue_cdn_here"></script>
</head>
<body>
    <div id="vue-list>
        <template>
           ....
        </template>
    <div>
    <script src="vue-list.js"></script>
</body>

vue-list.js:

new Vue({
    el: '#vue-list',
    ...
})

form.html:

<head>
    <script src="vue_cdn_here"></script>
</head>
<div id="vue-form>
    <template>
        ...
    </template>
<div>
<script src="vue-form.js"></script>

vue-form:

new Vue({
    el: '#vue-form',
    ...
})

I left out the methods and data parts for brevity. Everything worked fine. Vue app rendered on both pages and functioned well.

What I'm trying to do is to bundle the JS using webpack. This is to reduce number of production files and to cache-bust. Previous setup would result in about 10 separate JS files.

Current setup that's not quite working yet:

list.html/form.html:

<head>
    // no scripts in head anymore
</head>
<body>
    <div id="respective_id_here">
        <template>
            // view code here
        </template>
    </div>
    <script src="bundle.js"></script>
</body>

_index.js:

...
import './vue-list';
import './vue-form';
...

webpack.config.js:

module.exports = {
    entry: './static/js/_index.js',
    output: {
        path: __dirname,
        filename: './static/js/bundle.js'
    }
};

The issue is that, in the rendered HTML, at the location where the Vue app is supposed to be generated, i.e. div#vue-list, is something else, like so:

<head>
</head>
<body>
<!--function(e,n,r,i){return sn(t,e,n,r,i,!0)}-->
</body>

I would like to keep the one-app-per-page structure that we have currently instead of turning it all into a single-page-application. One of the main allures of Vue is how it's supposed to be easy to do incremental migration rather than a whole architecture overhaul.

I would appreciate any hints for this issue. Thank you.

Python工程师服务端开发就业面试高级视频教程

猜你喜欢