时间戳

首页 > 解决方案 > Vuejs + webpack 导入js文件后显示空白页面

vue.js - Vuejs + webpack 导入js文件后显示空白页面

问题描述

Vuejs + webpack（开发环境）在 Footer.vue 文件中导入 core.min.js 文件后显示空白页面。

控制台显示没有错误。要查看 core.min.js 的代码，请查看https://drive.google.com/file/d/1IYcH31j2lqh96ZlNgdXr6wnqrq2HAWCK/view

注意：我只导入 core.min.js 。

应用程序.vue

<template>
  <div id="app">

    <div class="page">

      <app-header></app-header>
      <app-home></app-home>
      <app-footer></app-footer>

    </div>  

  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
  @import '//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900%7CRoboto:300,400,500,700,900';


  @import './assets/css/style.css';
  @import './assets/css/fonts.css';
</style>

页脚.vue

<template>

  <div>    
      <section class="section section-md bg-gray-31 context-dark">
        <div class="container">
          <div class="row row-40 justify-content-lg-between">
            <div class="col-md-6 col-lg-4 col-xl-3">
              <h3 class="heading-square font-weight-sbold" data-item=".heading-square-item"><span class="heading-square-item"></span>Latest Properties</h3><a class="post-minimal" href="single-property.html">
                <div class="post-minimal-image"><img src="./assets/images/post-minimal-01-161x136.jpg" alt="" width="161" height="136"/>
                </div>
                <div class="post-minimal-body">
                  <div class="post-minimal-title"><span> Retail Store Southwest 186th Street</span></div>
                  <div class="post-minimal-text"><span>From $120/month</span></div>
                </div></a><a class="post-minimal" href="single-property.html">
                <div class="post-minimal-image"><img src="./assets/images/post-minimal-02-161x136.jpg" alt="" width="161" height="136"/>
                </div>
                <div class="post-minimal-body">
                  <div class="post-minimal-title"><span> Apartment Building with Subunits</span></div>
                  <div class="post-minimal-text"><span>From $120/month</span></div>
                </div></a>
            </div>
            <div class="col-md-6 col-lg-4 col-xl-3 col-bordered">
              <h3 class="heading-square font-weight-sbold" data-item=".heading-square-item"><span class="heading-square-item"></span>Contact    Us</h3>
              <div class="link-with-icon heading-4 text-spacing-150 font-sec" data-item=".icon"><span class="icon icon-1 mdi mdi-phone"></span><a href="tel:#">1-800-700-6200</a></div>
              <div class="link-with-icon text-spacing-100" data-item=".icon"><span class="icon icon-2 mdi mdi-email-outline"></span><a href="mailto:#">info@demolink.org</a></div>
              <div class="link-with-icon text-spacing-100" data-item=".icon"><span class="icon icon-3 mdi mdi-map-marker"></span><a href="#">3015 Grand Ave, Coconut<br style="line-height: 0"> Grove,Merrick Way, FL 12345</a></div>
            </div>
            <div class="col-lg-4">
              <h3 class="heading-square font-weight-sbold" data-item=".heading-square-item"><span class="heading-square-item"></span>Newsletter Signup</h3>
              <p class="rd-mailform-label">Enter your e-mail to get the latest news of Real Estate</p>
              <form class="rd-form rd-mailform rd-form-inline-1" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="bat/rd-mailform.php">
                <div class="form-wrap">
                  <input class="form-input" id="subscribe-form--email" type="email" name="email" data-constraints="@Email @Required">
                  <label class="form-label" for="subscribe-form--email">Your e-mail</label>
                </div>
                <div class="form-button">
                  <button class="button button-primary button-square" type="submit">Subscribe</button>
                </div>
              </form>
              <ul class="list-inline-1">
                <li><a class="icon fa-facebook" href="#"></a></li>
                <li><a class="icon fa-twitter" href="#"></a></li>
                <li><a class="icon fa-google-plus" href="#"></a></li>
                <li><a class="icon fa-pinterest-p" href="#"></a></li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <!-- Page footer-->
      <footer class="section footer-classic context-dark bg-gray-21">
        <div class="container">
          <div class="row row-10 justify-content-sm-between">
            <div class="col-sm-6">
              <!-- Rights-->
              <p class="rights"><span>Real Estate</span> <span>&copy;&nbsp;</span><span class="copyright-year"></span><span>&nbsp;</span><a href="privacy-policy.html">Privacy Policy</a>
              </p>
            </div>
            <div class="col-sm-6 text-sm-right">
              <div class="right-1"><a href="submit-property.html"><span class="icon mdi mdi-plus"></span>Submit Property</a></div>
            </div>
          </div>
        </div>
      </footer>

    <!-- Global Mailform Output -->
    <div class="snackbars" id="form-output-global"></div>
  </div>  

</template>

<script >
  import "./assets/js/core.min.js";
  //import "./assets/js/script.js";

  export default {
    name: 'Footer'
  }

</script>

main.js

import Vue from 'vue';
import App from './App.vue';
import Header from './Header.vue';
import Home from './Home.vue';
import Footer from './Footer.vue';


Vue.component('app-header',Header);
Vue.component('app-home',Home);
Vue.component('app-footer',Footer);


new Vue({
  el: '#app',
  render: h => h(App)
});

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {

          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        //exclude: ["/node_modules/","/src/assets/js/core.min.js"]
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },

      {
        test: /\.(woff|woff2|ttf|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 10000/*,
              mimetype: 'application/octet-stream'*/
            }
          }
        ]
      }

    ],

  },
  resolve: {

    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']

  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },

  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })


  ])
}

项目目录图片 在此处输入图像描述

标签： vue.jswebpack

解决方案

从我所见，您尝试导入的 javascript 将用于您的 HTML 而不是 Vue 组件。导入js文件有正确的方法；

在您的组件中（例如App.vue）

import VueInjectJs from 'vue-inject-js'

export default {
  name: 'app',

  components: {
    VueInjectJs
  },
}

在你的

<template>
  <div id="app">
    <VueInjectJs src="src/assets/js/core.min.js" />
    <VueInjectJs src="src/assets/js/script.js" />
  </div>
</template>

您必须先安装vue-inject-js。像这样：

npm install -g vue-inject-js

希望能帮助到你

推荐阅读