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'] // 值载入须要的模块
  ....