改造 vue-cli 腳手架

改造 vue-cli 腳手架

注意，這裏使用的 vue-cli 的版本爲 2.8.2，不一樣版本的 vue-cli 可能會有些許不同。

1、配置多頁面

項目開發目錄：

須要注意一點，每一個頁面的文件夾命名、文件夾裏面的入口 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>

2、配置跨域代理

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'
            }
        }
    },
}

3、配置經常使用 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

---

注意

轉載、引用，但請標明做者和原文地址