个人中心
gpt4 book ai didi

javascript - 导入有效，但为什么 require 不起作用？

转载 作者：行者123 更新时间：2023-12-02 21:56:01 25 4
gpt4 key购买 nike

我正在使用 webpack 在 main.js 中构建一个简单的项目。如果我使用 import 导入 app.js，结果效果很好。但是，如果我使用 require，vue 模板将不会显示在页面上。

我认为 Babel 将 import 编译为 require；如果是这样，为什么 require 在这里不起作用？

使用require的结果:

<!DOCTYPE html>
<html lang="en">
<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>Document</title>  
</head>
<body>
    <!--function(e,n,r,o){return Fe(t,e,n,r,o,!0)}-->
    <h1>123</h1>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>  
</head>
<body>
    <div id="app"></div>
    <h1>123</h1>
</body>
</html>

main.js

const Vue = require("vue");
const router = require('vue-router')
// const app = require('./app.vue')
import app from './app.vue'


new Vue({
el: "#app",
data: {},
render: el => el(app),
// router
})

webpack.config.js

const htmlPlugin = require('html-webpack-plugin')


module.exports = {
  entry: path.join(__dirname, "./src/main.js"),

  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js"
  },

  module: {
    rules: [
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
      { test: /\.vue$/, use: "vue-loader" }
    ]
  },
  plugins: [
    new htmlPlugin({
      minify: {
        removeAttributeQuotes: true
      },
      hash: true,
      template: "./src/index.html"
    })
  ],
  resolve: {
    // extensions: [ '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
};

app.js

<template>
<div class="app-contianer">
    <h1>test</h1>
</div>
</template>
<script>
export default {
  data () {
    return {
    };
  }
}
</script>
<style lang="css" scoped>
</style>

最佳答案

require 和 import 访问导入对象的方式不同。

import app from './app.vue'

这行实际上意味着这个，并且它的工作方式应该与导入相同:

const app = require('./app.vue').default
<小时/>

为了完整起见，这一行:

const app = require('./app.vue')

相当于:

import * as app from './app.vue'

关于javascript - 导入有效，但为什么 require 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60008830/

25 4 0
文章推荐： JavaScript Array.filter uniqes 并且不阻塞 UI
文章推荐： javascript - React Hooks : how to properly map an array with nested arrays and objects inside a select element?(新编码器)
文章推荐： javascript - 嵌入可以访问本地存储的reactjs应用程序
文章推荐： javascript - 嵌套 V-For 事件类
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com