【Issues-Webpack-N3】vue-loader没有将tempate内容打包进去

最新推荐文章于 2022-11-26 09:18:19 发布

置顶若叶岂知秋vip

最新推荐文章于 2022-11-26 09:18:19 发布

阅读量728

点赞数

分类专栏： Issues vue-js 文章标签： vue vue-loader webpack template

本文链接：https://blog.csdn.net/gccll/article/details/76714195

版权

vue-js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Issues

2 篇文章 0 订阅

订阅专栏

vue文件里面的template没有被打包进模板文件中

/*
  vue loader
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var extract = (loader) => {
    let loaders = [ 'css-loader' ];
    if (loader && loaders.indexOf(loader) === -1) {
        loaders.push(loader);
    }
    return ExtractTextPlugin.extract({
        fallback: 'vue-style-loader',
        use: loaders
    });
};

module.exports = {
    test: /\.vue$/,
    use: [
        {
            loader: 'vue-loader',
            options: {
                loaders: {
                    css: extract([
                        'css-loader'
                    ]),
                    stylus: extract([
                        'stylus-loader'
                    ]),
                    scss: extract([
                        'sass-loader'
                    ]),
                    sass: extract([
                        {
                            loader: 'sass-loader',
                            query: {
                                indentedSyntax: true
                            }
                        }
                    ]),

                    html: 'vue-html-loader',

                    js: [
                        {
                            loader: 'babel-loader',
                            options: {
                                presets: ['env'],
                                comments: false
                            }
                        }
                    ]
                },

                // 会在默认的Loaders 之后执行
                // postLoaders: {
                //     html: 'babel-loader'
                // }
            }
        }
    ]
};

经过网上找答案最终没有找到准确的，总结答案分为以下几种

没有指定 html 加载器
html: 'vue-html-loader'
结果没卵用
没有使用 js loader
这个更是不着边

最后在这个链接下找到提示：

template没有被打包

其中有两个答案：

意思没用对路由（还没用到路由这块，因此并不是我的问题症结所在）
让写个mounted测试组件有没有被加载

提示就出现在第二个回答上

那么来看下我是怎么引入使用组件的

import Vue from 'Vue';
import App from './components/App.vue';

然后回想过来才发现，只是引入了文件而已，但是并没有真正去用到，所以问题就迎刃而解了

使用 Vue 及加载组件 App.vue

new Vue(App).$mount('#app');

OK 问题解决，最后DOM 报警告说找不到 #app，这个原因是 index.html 模板文件中并没有提供个
入口元素

添加如下：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>
    </head>
    <body>
        ......
        <!-- 在下面添加个id为app的入口给vue即可 -->
        <div id="app"></div>
    </body>
</html>