vue 多頁配置

時間 2019-11-10

標籤 vue 多頁配置简体版

原文原文鏈接

vue-cli-multipage

附上一篇vue-cli#2.0 webpack 配置的詳細解釋linkphp

首先安裝vue-cli

npm install  vue-cli -g

vue init webpack my-project

cd my-project

npm install

下面是vue-cli的配置目錄

/build
    build.js               #構建生產代碼
    dev-client.js 
    dev-server.js          #執行本地服務器
    utils.js               #額外的通用方法
    webpack.base.conf.js   #默認的webpack配置
    webpack.dev.conf.js    #本地開發的webpack配置
    webpack.prod.conf.js   #構建生產的webpack配置
/config   配置文件
    dev.env.js
    index.js
    pord.env.js
    test.env.js
/src
    assets                  #放資源
    components              #組件
    /module                 #頁面模塊
        /home               #子頁面
            index.html      #模版頁面
            index.js        #js入口
        // 注意，這裏的html和js的文件名要一致，如上面就是index    
/dist                       #最後打包生成的資源
    /js                
    /css
    /home

修改方法是參考yaoyao1987的模版css

修改默認的webpack配置webpack.base.conf.js

生成須要的入口文件

var glob = require('glob')
var entries = getEntry('./src/module/**/*.js') // 得到入口js文件
function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + basename; // 正確輸出js和html的路徑
    entries[pathname] = entry;
  });
  // 優化加載速度
  if (process.env.NODE_ENV !== 'production') {
    const only = config.dev.only
    if (only instanceof Array) {
      for (key in entries) {
        const canDel = only.every(v => !key.includes(v))
        if (canDel) {
          delete entries[key]
        }
      }
    }
  }
  return entries;
}

module.exports = {
  entry: entries,
  ...

修改本地開發的webpack配置webpack.dev.conf.js

這裏是和本地服務器有關的配置
這裏是根據目錄生成對應的頁面

var path = require('path')
var glob = require('glob')
var pages = getEntry('./src/module/**/*.html')

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry))
    tmp = entry.split('/').splice(-3)
    pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑
    entries[pathname] = entry
  })

  if (process.env.NODE_ENV !== 'production') {
    const only = config.dev.only
    if (only instanceof Array) {
      for (key in entries) {
        const canDel = only.every(v => !key.includes(v))
        if (canDel) {
          delete entries[key]
        }
      }
    }
  }
  return entries
}

for (var pathname in pages) {
  // 配置生成的html文件，定義路徑等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路徑
    chunks: [pathname, 'vendor', 'manifest'], // 每一個html引用的js模塊
    inject: true              // js插入位置
  }
  // 須要生成幾個html文件，就配置幾個HtmlWebpackPlugin對象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}

修改構建生產的webpack配置webpack.prod.conf.js

這裏是最後打包的配置
1.首先根據目錄生成頁面，這裏都用到webpack的HtmlWebpackPlugin插件
2.配置裏面能夠自定義屬性。用於添加到模版頁面，以下面的setPath

頁面模版
<%= htmlWebpackPlugin.options.setPath %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
    thip
    <!-- built files will be auto injected -->
    <script>       
        var path = "<%= htmlWebpackPlugin.options.getPath %>"
        var oData = <%= htmlWebpackPlugin.options.oData %>
    </script>
</body>

</html>

var glob = require('glob')

function getEntry(globPath) {
  var entries = [],
    basename, tmp, pathname

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry))
    tmp = entry.split('/').splice(-3)
    pathname = tmp.splice(1, 1) + '/' + basename // 正確輸出js和html的路徑
    entries[pathname] = entry
  })
  return entries
}

var pages = getEntry('./src/module/**/*.html')

for (var pathname in pages) {
  // 配置生成的html文件，定義路徑等
  var conf = {
    setPath: "<?php $domain_static = $this->config->item('domain_static'); ?>",
    getPath: "<?php echo $domain_static;?>",
    oData: "<?php echo ! empty($articles)? json_encode($articles): '{}';?>",
    filename: pathname + '.php', // 這裏是最後生成的文件，由於個人項目須要php文件就修改爲php後綴。如不須要改爲html便可
    template: pages[pathname], // 模板路徑
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
    },
    chunksSortMode: 'dependency',
    chunks: [pathname, 'vendor', 'manifest'], // 每一個html引用的js模塊
    inject: true              // js插入位置
  }
  // 須要生成幾個html文件，就配置幾個HtmlWebpackPlugin對象
  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

module.exports = webpackConfig

修改配置文件config

修改index.js

在build.js中會引用assetsRoot，這裏就是對應的根目錄，改爲你想要輸出的地址就行了。ps：這裏是相對地址
assetsPublicPath會被引用插入到頁面的模版中，這個是你資源的根目錄

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: '',
    assetsPublicPath: 'http://static3.vaya.com/dist/', // 這裏是實際項目上面資源的總路徑
    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },
dev: {
    .
    .
    .
    only: ['home', 'trip'] // 值載入須要的模塊
  ....

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。