改造 vue-cli 脚手架
改造 vue-cli 脚手架
注意，这里使用的 vue-cli 的版本为 2.8.2，不同版本的 vue-cli 可能会有些许不一样。
一、配置多页面
项目开发目录：
需要注意一点，每个页面的文件夹命名、文件夹里面的入口 js 文件名及 hmtl 模板文件名应该一致，这样就可以使用一个函数来自动配置入口文件，而不必手动配置
project/
├──build/
├──config/
├──node_modules/
├──src/
│ ├──assets/
│ ├──components/
│ ├──html/
│ │ ├──pageOne/
│ │ │ ├──components/
│ │ │ ├──route/ // 如果有使用 vue-route
│ │ │ ├──store/ // 如果有使用 vueX
│ │ │ ├──style/
│ │ │ ├──APP.vue
│ │ │ ├──pageOne.html
│ │ │ ├──pageOne.js
│ │ ├──pageTwo/
│ │ │ ├──components/
│ │ │ ├──route/
│ │ │ ├──store/
│ │ │ ├──style/
│ │ │ ├──APP.vue
│ │ │ ├──pageTwo.html
│ │ │ ├──pageTwo.js
│ ├──utils/
├──static/
├──babelrcc
├──.editorconfig
├──.gitgnore
├──package.json
├──README.md
项目打包目录
dist
├──html/
│ ├──pageOne.html
│ ├──pageTwo.html
├──static/
│ ├──img/
│ ├──fonts/
│ ├──css/
│ │ ├──html/
│ │ │ ├──pageOne.css
│ │ │ ├──pageTwo.css
│ │ ├──other.css
│ ├──js/
│ │ ├──html/
│ │ │ ├──pageOne.js
│ │ │ ├──pageTwo.js
│ │ ├──manifest.js
│ │ ├──vendor.js
├──favicon.ico
1. 添加入口工具函数
// build/utils.js
var glob = require('glob');
exports.getEntries = function (globPath) {
var entries = {}
/**
* 读取src目录,并进行路径裁剪
*/
glob.sync(globPath).forEach(function (entry) {
/**
* path.basename 提取出用 ‘/' 隔开的path的最后一部分，除第一个参数外其余是需要过滤的字符串
* path.extname 获取文件后缀
*/
var basename = path.basename(entry, path.extname(entry)) // 过滤router.js
// ***************begin***************
// 当然， 你也可以加上模块名称, 即输出如下： { module/main: './src/module/index/main.js', module/test: './src/module/test/test.js' }
// 最终编译输出的文件也在module目录下， 访问路径需要时 localhost:8080/module/index.html
// slice 从已有的数组中返回选定的元素, -3 倒序选择，即选择最后三个
var tmp = entry.split('/').splice(-3)
if(basename!==tmp[1]) return; //过滤其他js文件
var pathname = tmp.splice(0, 1) + '/' + basename; // splice(0, 1)取tmp数组中第一个元素
entries[pathname] = ['babel-polyfill',entry]
});
return entries;
}
/* 变量值
entry： ../src/html/index/index.js
basename: index
tmp: [ 'html', 'index', 'index.js' ]
pathname: html/index
enteries: {
'html/index': '../src/html/index/index.js',
'html/first': '../src/html/first/first.js'
}
*/
2. 修改入口配置
// bulid/webpack.base.conf.js
module.exports = {
entry: utils.getEntries('./src/html/*/*.js'),
...
}
3. 修改 HtmlWebpackPlugin 配置
// bulid/webpack.dev.conf.js
# 1. 引入工具函数
var utils = require('./utils')
# 2. 注释掉原来的 HtmlWebpackPlugin 配置，大概在 29 行
# 3. 在文件末尾加入下面代码
var pages = utils.getEntries('./src/html/*/*.html');
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
var conf = {
favicon: "favicon.ico",
filename: pathname + '.html',
template: pages[pathname][1], // 模板路径
inject: true, // js插入位置
excludeChunks: Object.keys(pages).filter(item => {
return (item != pathname)
})
};
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
// bulid/webpack.prod.conf.js
// 1. 注释掉原来的 HtmlWebpackPlugin 配置，大概在 52 行
// 2. 在文件末尾加入下面代码
var pages = utils.getEntries('./src/html/**/*.html');
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
var conf = {
favicon: "favicon.ico",
filename: pathname + '.html',
template: pages[pathname][1], // 模板路径
inject: true, // js插入位置
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',
};
if (pathname in module.exports.entry) { //为页面导入所需的依赖
conf.chunks = ['vendor','manifest', pathname];
conf.hash = false;
}
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
4. 修改默认打开路径
// bulid/dev-server.js
var uri = 'http://localhost:' + port + '/' + Object.getOwnPropertyNames(utils.getEntries('./src/html/*/*.html'))[0] + '.html'
5. 修改打包路径为相对路径
// config/index.js
bulid: {
assetsPublicPath: '../',
}
6. 修改打包后 css 文件中对 图片和字库文件引用路径出错的的问题
// build/utils
// 38行
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../../', // 修改这里
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
7. 检测浏览器版本
<!-- 在模板 html 中引入 -->
<script>
if (!+"\v1") {
document.body.innerHTML = "<div style='background: #00a1d6; text-align: center; padding: 10px 0; color: #fff;'>为了保护你的账号安全，Anywork已不支持IE8及以下版本浏览器访问，建议你升级到IE最新版本浏览器，或使用Chrome等其他浏览器。</div>"
}
</script>
二、配置跨域代理
1. 定义接口工具函数，使用 axios 规定访问路径
// src/utils/interaction.js
import axios from 'axios'
export const IP = '/anywork/';
export const myAxios = axios.create({
baseURL: IP,
// withCredentials: true
})
2. 添加跨域配置
// config/index.js
module.exports = {
dev: {
proxyTable: {
'/anywork': {
target: 'http://10.21.48.11:8080',
changeOrigin: true,
pathRewrite: {
'^/anywork': '/anywork'
}
}
},
}
三、配置常用 loader 和 依赖项
1. 引入 less
npm 下载
$ cnpm install less less-loader --save-dev
webpack.base.conf.js 配置
// 在 rules 中引入 loader
{
test: /\.less$/,
include: [
path.resolve(__dirname, "not_exist_path")
],
loader: 'style-loader!css-loader!less-loader'
},
2. 引入 stylus
npm install stylus stylus-loader --save-dev
<style scoped lang="stylus">
</style>
3. 引入 babel-polyfill
使 IE9 能使用一些 ES6 的新特性
先引入垫片
npm install bable-ployfill --save
方式一：通过 import 引入
// 入口文件
import 'babel-polyfill'
方式二：通过webpack 入口引入
// webpack.conf.js
module.exports = {
entry: ['babel-polyfill', entry-file-URL]
}
4. 引入其他
npm install axios --save
npm install iview --save // UI库
npm install vuex --save
注意
转载、引用，但请标明作者和原文地址
