vue webpack多页配置

单页配置相对于多页简单很多，这个是公司同事总结共享的多页配置

vue-cli-multipage

首先安装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入口

修改build.js

注释掉其中的两句，因为这里不需要删除所有的文件

var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
// rm('-rf', assetsPath)  // 这里是移除根目录
// mkdir('-p', assetsPath) // 新建根目录
cp('-R', 'static/*', assetsPath)  // 复制资源

修改默认的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(1, 1) + '/' + basename; // 正确输出js和html的路径
    entries[pathname] = entry;
  });
  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(1, 1) + '/'  + basename // 正确输出js和html的路径
    entries[pathname] = entry
  })
  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>
    <!-- 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',
    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

修改config/index.js

在build.js中会引用assetsRoot，这里就是对应的根目录，改成你想要输出的地址就好了。ps：这里是相对地址
assetsPublicPath会被引用插入到页面的模版中，这个是你资源的根目录

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: '',
    assetsPublicPath: '<?php echo $domain_static;?>/dist/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

复制资源文件到后台设置的相应目录创建cp.js

require('./check-versions')()
require('shelljs/global')
env.NODE_ENV = 'production'

var path = require('path')
var ora = require('ora')

var jsDist = path.resolve(__dirname, '../dist/js')
var cssDist = path.resolve(__dirname, '../dist/css')
var webDist = path.resolve(__dirname, '../dist/web')
var mobileDist = path.resolve(__dirname, '../dist/mobile')


var pubPath = path.resolve(__dirname, '../../public/dist')
var webview = path.resolve(__dirname, '../../web/views/')

rm('-rf', pubPath)
mkdir('-p', pubPath)
cp('-R', jsDist, pubPath)
cp('-R', cssDist, pubPath)
cp('-R', webDist, webview)
cp('-R', mobileDist, webview)

修改package.json

{
  "name": "y",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "lujs",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js", //执行相应的npm run命令
    "build": "node build/build.js",
    "cp": "node build/cp.js"
  },
  "dependencies": {
    "vue": "^2.1.0"
  },
  "devDependencies": { //在项目根目录执行npm install会下载相关的依赖
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-component": "^0.6.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "element-ui": "^1.0.4",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.4",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

其他

使用淘宝镜像

https://npm.taobao.org/ 使用淘宝镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org  使用cpm代替默认的npm

切换node版本

https://github.com/alsotang/n... 使用nvm管理node

1.安装nvm

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.2/install.sh | bash
$ nvm  有内容输出则说明安装成功了

2.安装node

$ nvm install 0.12 后面指定要安装的node版本
$ nvm ls 查看安装的所有node版本，那个绿色小箭头的意思就是现在正在使用的版本

3.切换node版本

nvm use 0.12 后面指定你要使用的node版本
node -v 查看当前node版本

4.完善安装

检查 ~/.profile 或者 ~/.bash_profile 中有没有这样两句

export NVM_DIR="/Users/YOURUSERNAME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

这两句会在bash启动的时候被调用，然后注册nvm命令

调用

$ nvm ls

有default的指向，没有就执行

$ nvm alias default 0.12

再

$ nvm ls

vue webpack多页配置

vue-cli-multipage

修改build.js

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

修改本地开发的webpack配置webpack.dev.conf.js

修改构建生产的webpack配置webpack.prod.conf.js

修改配置文件config

复制资源文件到后台设置的相应目录创建cp.js

修改package.json

其他

使用淘宝镜像

切换node版本

1.安装nvm

2.安装node

3.切换node版本

4.完善安装

Hayley

引用和评论

工作总结-git的使用

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

vue webpack多页配置

vue-cli-multipage

修改build.js

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

修改本地开发的webpack配置webpack.dev.conf.js

修改构建生产的webpack配置webpack.prod.conf.js

修改配置文件config

复制资源文件到后台设置的相应目录 创建cp.js

修改package.json

其他

使用淘宝镜像

切换node版本

1.安装nvm

2.安装node

3.切换node版本

4.完善安装

Hayley

引用和评论

工作总结-git的使用

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

复制资源文件到后台设置的相应目录创建cp.js