vue 项目实现多页打包 vue.config.js
时间: 2023-12-30 12:54:58 浏览: 26
在 Vue CLI 3.x 中,实现多页打包的方式有两种。
第一种方式是在 `vue.config.js` 中配置 `pages` 属性,示例如下:
``` javascript
module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html'
},
about: {
entry: 'src/pages/about/main.js',
template: 'public/about.html',
filename: 'about.html'
}
}
}
```
上面的代码定义了两个页面,`index` 和 `about`,分别对应 `src/pages/index/main.js` 和 `src/pages/about/main.js` 两个入口文件。同时还指定了每个页面的模板文件和生成的 HTML 文件名。
第二种方式是在 `vue.config.js` 中配置 `configureWebpack` 属性,示例如下:
``` javascript
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html'
},
about: {
entry: 'src/pages/about/main.js',
template: 'public/about.html',
filename: 'about.html'
}
},
configureWebpack: {
resolve: {
alias: {
'@': resolve('src')
}
}
}
}
```
上面的代码除了定义了两个页面之外,还配置了一个别名 `@`,用于指向 `src` 目录。这个别名可以在项目中使用,例如 `import HelloWorld from '@/components/HelloWorld.vue'`。
以上是两种实现多页打包的方式,具体选择哪一种取决于你的需求。