改造 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  

---

注意

转载、引用，但请标明作者和原文地址