0
点赞
收藏
分享

微信扫一扫

vue多页面


pages ​​#​​

  • Type: ​​Object​
  • Default: ​​undefined​​在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象,对象的 key 是入口的名字,value 是:
  • 一个指定了 ​​entry​​​, ​​template​​​, ​​filename​​​, ​​title​​​ 和 ​​chunks​​​ 的对象 (除了 ​​entry​​ 之外都是可选的);
  • 或一个指定其 ​​entry​​ 的字符串。

pages ​​#​​

  • Type: ​​Object​
  • Default: ​​undefined​​在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象,对象的 key 是入口的名字,value 是:
  • 一个指定了 ​​entry​​​, ​​template​​​, ​​filename​​​, ​​title​​​ 和 ​​chunks​​​ 的对象 (除了 ​​entry​​ 之外都是可选的);
  • 或一个指定其 ​​entry​​ 的字符串。

pages ​​#​​

  • Type: ​​Object​
  • Default: ​​undefined​​在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象,对象的 key 是入口的名字,value 是:
  • 一个指定了 ​​entry​​​, ​​template​​​, ​​filename​​​, ​​title​​​ 和 ​​chunks​​​ 的对象 (除了 ​​entry​​ 之外都是可选的);
  • 或一个指定其 ​​entry​​ 的字符串。

 

pages ​​#​​

  • Type: ​​Object​
  • Default: ​​undefined​​在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象,对象的 key 是入口的名字,value 是:
  • 一个指定了 ​​entry​​​, ​​template​​​, ​​filename​​​, ​​title​​​ 和 ​​chunks​​​ 的对象 (除了 ​​entry​​ 之外都是可选的);
  • 或一个指定其 ​​entry​​ 的字符串。

pages ​​#​​

  • Type: ​​Object​
  • Default: ​​undefined​​在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象,对象的 key 是入口的名字,value 是:
  • 一个指定了 ​​entry​​​, ​​template​​​, ​​filename​​​, ​​title​​​ 和 ​​chunks​​​ 的对象 (除了 ​​entry​​ 之外都是可选的);
  • 或一个指定其 ​​entry​​ 的字符串。

 

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与​​现代化的工具链​​​以及各种​​支持类库​​结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解,我们​​制作了一个视频​​,带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看​​对比其它框架​​。

 

​​https://cli.vuejs.org/zh/config/#pages​​ 

vue.config.js:

const { defineConfig } = require('@vue/cli-service')
const vConsolePlugin = require('vconsole-webpack-plugin')

module.exports = defineConfig({
lintOnSave: false,
transpileDependencies: true,
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
},
order: {
entry: 'src/weiban/order.js',
template: 'public/weiban/order.html',
filename: 'weiban/order.html',
},
},
configureWebpack: (config) => {
console.log('old webpackConfig', config)
config.output.chunkFilename = 'js/[name]-legacy-[hash].js'
if (process.env.VUE_APP_NODE_ENV === 'dev') {
config.devtool = 'eval-source-map'
} else {
config.devtool = 'cheap-module-source-map'
//config.mode = 'production'
}

let envType = process.env.VUE_APP_NODE_ENV != 'production'
let pluginsDev = [
new vConsolePlugin({
filter: [],
enable: envType,
}),
]

config.plugins = [...config.plugins, ...pluginsDev]

console.log('new webpackConfig', config)
},
})

vue多页面_html

 访问链接:

http://localhost:8080/weiban/order.html

打包:

vue多页面_前端_02

 

举报

相关推荐

0 条评论