详解vue-cli3多页应用改造

2020-06-14 06:28:46易采站长站整理

entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时,
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index'] },
// 当使用只有入口的字符串格式时,
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话,就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}

Step1: 创建新项目

选择需要的Babel、Router、Vuex、eslint…

具体步骤参考官网:创建一个项目

Step2: 修改配置文件vue.config.js

在根目录下新建public文件夹,包含favicon.ico和index.html两个文件。

index文件内容如下:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
<title>P-公共服务平台</title>
</head>
<body>
<noscript>
<strong>
We're sorry but page doesn't work properly without JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

然后,在根目录下新建vue.config.js


const glob = require('glob')
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)

const PAGES_PATH = './src/pages/*/*.js'

module.exports = {
pages: setPages(),
// TODO:以下内容非生成多页应用必须配置
lintOnSave: true,
productionSourceMap: false,
chainWebpack: config => {
/**
* 自动化导入文件
*/
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'] types.forEach(
type => addStyleResource(config.module.rule('less').oneOf(type)))
/**
* 添加别名
*/
config.resolve.alias
.set('@index', resolve('src/pages/index'))
.set('@label', resolve('src/pages/label'))
.set('@metrics', resolve('src/pages/metric'))
.set('@service', resolve('src/pages/service'))