正文

改造 vue-cli 脚手架

IP云
IP云V管理员/1 阅读
12/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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

注意

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

相关阅读

目录[+]