vue多页面设置

本文参考:https://blog.csdn.net/Tank_in_the_street/article/details/73732801

进入\build\webpack.base.conf.js目录下,在module.exports的域里,找到entry,在那里配置添加多个入口:

entry: {
    app: './src/main.js',
    login: './src/login.js'
  },

接下来就是对开发环境run dev里进行修改,打开\build\webpack.dev.conf.js文件,在module.exports那里找到plugins,下面写法如下:

plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    
    // HMR shows correct file names in console on update.
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }),
    new HtmlWebpackPlugin({
      filename: 'login.html',
      template: 'login.html',
      inject: true,
      chunks: ['login']
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]

之后就对run build也就是编译环境进行配置。首先打开\config\index.js文件,在build里加入这个:

index: path.resolve(__dirname, '../dist/index.html'),
login: path.resolve(__dirname, '../dist/login.html'),

然后打开/build/webpack.prod.conf.js文件,在plugins那里找到HTMLWebpackPlugin,然后添加如下代码:

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'app']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.login,
      template: 'login.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'login']
    }),

配置完了,接下来新建一个login.htmllogin.js, and login.vue
login.js可以这样写


import Vue from 'vue'
import login from './login.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#login',
  render: h => h(login)
})

login.vue

<template>
  <div id="login">
    <login></login>
  </div>
</template>

<script>
import login from './components/login'

export default {
  name: 'login',
  components: {
    login
  }
}
</script>

启动项目。。。。

然后,

失败了。。。。
报了个错:vue Uncaught RangeError: Maximum call stack size exceeded

经过一系列的查找,终于找到什么错了,原来我的两个vue文件重命了,大家都叫login.vue,改掉另外一个就可以了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue单个页面设置背景图片,有几种方法可以实现。 第一种方法是通过CSS样式设置背景图片。在你的Vue组件中的<style>标签中,你可以使用background-image属性来定义背景图片的路径。例如: ``` <style> .container { background-image: url(../assets/background.png); ... } </style> <template> <div class="container"> ... </div> </template> ``` 这将在你的组件中创建一个类名为“container”的容器,并将背景图片设置为“background.png”。 第二种方法是使用Vue的背景绑定指令。在组件中,你可以使用v-bind:style指令将背景图片绑定到一个Vue变量上,如下所示: ``` <template> <div v-bind:style="{ backgroundImage: 'url(' + backgroundImageUrl + ')' }"> ... </div> </template> <script> export default { data() { return { backgroundImageUrl: "../assets/background.png" } } } </script> ``` 在这个例子中,我们使用v-bind:style指令将背景图片绑定到backgroundImageUrl变量,然后将其插入到style属性中作为CSS样式的一部分。 第三种方法是使用vue-cover插件。这是一个Vue插件,它提供了一种简单的方法来设置背景图片。你只需在组件中导入它,然后使用一个<cover>标签来包含你的组件中的内容,如下所示: ``` <template> <cover src="../assets/background.png"> <div> ... </div> </cover> </template> <script> import Cover from 'vue-cover' export default { components: { Cover } } </script> ``` 在这个例子中,我们导入了vue-cover插件,并将其添加到组件的components对象中。然后我们使用<cover>标签去包裹我们的组件内容,并将背景图片的路径传递给它的src属性。 这是三种在Vue单个页面设置背景图片的方法,你可以根据你的需求选择其中一个。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值