手把手教你vue-cli單頁到多頁應(yīng)用的方法

'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

//add
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //功能：生成html文件及js文件并把js引入html
const pagePath = path.resolve(__dirname, '../src/views/'); //頁面的路徑，比如這里我用的views，那么后面私服加入的文件監(jiān)控器就會從src下面的views下面開始監(jiān)控文件
//end

exports.assetsPath = function (_path) {
 const assetsSubDirectory = process.env.NODE_ENV === 'production'
 ? config.build.assetsSubDirectory
 : config.dev.assetsSubDirectory

 return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
 options = options || {}

 const cssLoader = {
 loader: 'css-loader',
 options: {
 sourceMap: options.sourceMap
 }
 }

 const postcssLoader = {
 loader: 'postcss-loader',
 options: {
 sourceMap: options.sourceMap
 }
 }

 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
 const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

 if (loader) {
 loaders.push({
 loader: loader + '-loader',
 options: Object.assign({}, loaderOptions, {
 sourceMap: options.sourceMap
 })
 })
 }

 // Extract CSS when that option is specified
 // (which is the case during production build)
 if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader'
 })
 } else {
 return ['vue-style-loader'].concat(loaders)
 }
 }

 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
 css: generateLoaders(),
 postcss: generateLoaders(),
 less: generateLoaders('less'),
 sass: generateLoaders('sass', { indentedSyntax: true }),
 scss: generateLoaders('sass'),
 stylus: generateLoaders('stylus'),
 styl: generateLoaders('stylus')
 }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
 const output = []
 const loaders = exports.cssLoaders(options)

 for (const extension in loaders) {
 const loader = loaders[extension]
 output.push({
 test: new RegExp('\\.' + extension + '$'),
 use: loader
 })
 }

 return output
}

exports.createNotifierCallback = () => {
 const notifier = require('node-notifier')

 return (severity, errors) => {
 if (severity !== 'error') return

 const error = errors[0]
 const filename = error.file && error.file.split('!').pop()

 notifier.notify({
 title: packageConfig.name,
 message: severity + ': ' + error.name,
 subtitle: filename || '',
 icon: path.join(__dirname, 'logo.png')
 })
 }
}

//add 新增一個方法處理入口文件（單頁應(yīng)用的入口都是寫死，到時候替換成這個方法）
exports.createEntry = () => {
 let files = glob.sync(pagePath + '/**/*.js');
 let entries = {};
 let basename;
 let foldername;

 files.forEach(entry => {
 // Filter the router.js
 basename = path.basename(entry, path.extname(entry), 'router.js');
 foldername = path.dirname(entry).split('/').splice(-1)[0];

 // If foldername not equal basename, doing nothing
 // The folder maybe contain more js files, but only the same name is main
 if (basename === foldername) {
 entries[basename] = [
 'webpack-hot-middleware/client?noInfo=true&reload=true&path=/__webpack_hmr&timeout=20000',
 entry];
 }
 });
 return entries;
};
//end

//add 新增出口文件
exports.createHtmlWebpackPlugin = () => {
 let files = glob.sync(pagePath + '/**/*.html', {matchBase: true});
 let entries = exports.createEntry();
 let plugins = [];
 let conf;
 let basename;
 let foldername;

 files.forEach(file => {
 basename = path.basename(file, path.extname(file));
 foldername = path.dirname(file).split('/').splice(-1).join('');

 if (basename === foldername) {
 conf = {
 template: file,
 filename: basename + '.html',
 inject: true,
 chunks: entries[basename] ? [basename] : []
 };
 if (process.env.NODE_ENV !== 'development') {
 conf.chunksSortMode = 'dependency';
 conf.minify = {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 };
 }

 plugins.push(new HtmlWebpackPlugin(conf));
 }
 });
 return plugins;
};
//end

/**
 * created by qbyu2 on 2018-05-30
 * express 私服
 * */
'use strict';

const fs = require('fs');
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware'); //文件監(jiān)控(前面配置了從views下面監(jiān)控)
const webpackHotMiddleware = require('webpack-hot-middleware'); //熱加載
const config = require('../config');
const devWebpackConfig = require('./webpack.dev.conf');
const proxyMiddleware = require('http-proxy-middleware'); //跨域

const proxyTable = config.dev.proxyTable;

const PORT = config.dev.port;
const HOST = config.dev.host;
const assetsRoot = config.dev.assetsRoot;
const app = express();
const router = express.Router();
const compiler = webpack(devWebpackConfig);

let devMiddleware = webpackDevMiddleware(compiler, {
 publicPath: devWebpackConfig.output.publicPath,
 quiet: true,
 stats: {
 colors: true,
 chunks: false
 }
});

let hotMiddleware = webpackHotMiddleware(compiler, {
 path: '/__webpack_hmr',
 heartbeat: 2000
});

app.use(hotMiddleware);
app.use(devMiddleware);

Object.keys(proxyTable).forEach(function (context) {
 let options = proxyTable[context];
 if (typeof options === 'string') {
 options = {
 target: options
 };
 }
 app.use(proxyMiddleware(context, options));
});

//雙路由 私服一層控制私服路由 vue的路由控制該頁面下的路由
app.use(router)
app.use('/static', express.static(path.join(assetsRoot, 'static')));

let sendFile = (viewname, response, next) => {
 compiler.outputFileSystem.readFile(viewname, (err, result) => {
 if (err) {
 return (next(err));
 }
 response.set('content-type', 'text/html');
 response.send(result);
 response.end();
 });
};

//拼接方法
function pathJoin(patz) {
 return path.join(assetsRoot, patz);
}

/**
 * 定義路由(私服路由 非vue路由)
 * */

// favicon
router.get('/favicon.ico', (req, res, next) => {
 res.end();
});

// http://localhost:8080/
router.get('/', (req, res, next)=>{
 sendFile(pathJoin('index.html'), res, next);
});

// http://localhost:8080/home
router.get('/:home', (req, res, next) => {
 sendFile(pathJoin(req.params.home + '.html'), res, next);
});

// http://localhost:8080/index
router.get('/:index', (req, res, next) => {
 sendFile(pathJoin(req.params.index + '.html'), res, next);
});

module.exports = app.listen(PORT, err => {
 if (err){
 return
 }
 console.log(`Listening at http://${HOST}:${PORT}\n`);
})

npm install webpack@3.10.0 --save-dev
npm install webpack-dev-middleware --save-dev
npm install webpack-hot-middleware@2.21.0 --save-dev
npm install http-proxy-middleware --save-dev

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
 module: {
 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
 },
 // cheap-module-eval-source-map is faster for development
 devtool: config.dev.devtool,

 // these devServer options should be customized in /config/index.js
 devServer: {
 clientLogLevel: 'warning',
 historyApiFallback: {
 rewrites: [
 { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
 ],
 },
 hot: true,
 contentBase: false, // since we use CopyWebpackPlugin.
 compress: true,
 host: HOST || config.dev.host,
 port: PORT || config.dev.port,
 open: config.dev.autoOpenBrowser,
 overlay: config.dev.errorOverlay
 ? { warnings: false, errors: true }
 : false,
 publicPath: config.dev.assetsPublicPath,
 proxy: config.dev.proxyTable,
 quiet: true, // necessary for FriendlyErrorsPlugin
 watchOptions: {
 poll: config.dev.poll,
 }
 },
 plugins: [
 new webpack.DefinePlugin({
 'process.env': require('../config/dev.env')
 }),
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
 new webpack.NoEmitOnErrorsPlugin(),
 // https://github.com/ampedandwired/html-webpack-plugin
 //del 注釋掉spa固定的單頁出口 末尾動態(tài)配上出口
 // new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 //end
 // copy custom static assets
 new CopyWebpackPlugin([
 {
 from: path.resolve(__dirname, '../static'),
 to: config.dev.assetsSubDirectory,
 ignore: ['.*']
 }
 ])
 ]
 //add
 .concat(utils.createHtmlWebpackPlugin())
 //end
})
//del
// module.exports = new Promise((resolve, reject) => {
// portfinder.basePort = process.env.PORT || config.dev.port
// portfinder.getPort((err, port) => {
// if (err) {
// reject(err)
// } else {
// // publish the new Port, necessary for e2e tests
// process.env.PORT = port
// // add port to devServer config
// devWebpackConfig.devServer.port = port
//
// // Add FriendlyErrorsPlugin
// devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
// compilationSuccessInfo: {
// messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
// },
// onErrors: config.dev.notifyOnErrors
// ? utils.createNotifierCallback()
// : undefined
// }))
//
// resolve(devWebpackConfig)
// }
// })
// })
//end

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
 module: {
 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
 },
 // cheap-module-eval-source-map is faster for development
 devtool: config.dev.devtool,

 // these devServer options should be customized in /config/index.js
 //del 注掉SPA的服務(wù)器
 // devServer: {
 // clientLogLevel: 'warning',
 // historyApiFallback: {
 // rewrites: [
 // { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
 // ],
 // },
 // hot: true,
 // contentBase: false, // since we use CopyWebpackPlugin.
 // compress: true,
 // host: HOST || config.dev.host,
 // port: PORT || config.dev.port,
 // open: config.dev.autoOpenBrowser,
 // overlay: config.dev.errorOverlay
 // ? { warnings: false, errors: true }
 // : false,
 // publicPath: config.dev.assetsPublicPath,
 // proxy: config.dev.proxyTable,
 // quiet: true, // necessary for FriendlyErrorsPlugin
 // watchOptions: {
 // poll: config.dev.poll,
 // }
 // },
 //end
 plugins: [
 new webpack.DefinePlugin({
 'process.env': require('../config/dev.env')
 }),
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
 new webpack.NoEmitOnErrorsPlugin(),
 // https://github.com/ampedandwired/html-webpack-plugin
 //del 注釋掉spa固定的單頁出口 末尾動態(tài)配上出口
 // new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 //end
 // copy custom static assets
 new CopyWebpackPlugin([
 {
 from: path.resolve(__dirname, '../static'),
 to: config.dev.assetsSubDirectory,
 ignore: ['.*']
 }
 ])
 ]
 //add
 .concat(utils.createHtmlWebpackPlugin())
 //end
})
//del
// module.exports = new Promise((resolve, reject) => {
// portfinder.basePort = process.env.PORT || config.dev.port
// portfinder.getPort((err, port) => {
// if (err) {
// reject(err)
// } else {
// // publish the new Port, necessary for e2e tests
// process.env.PORT = port
// // add port to devServer config
// devWebpackConfig.devServer.port = port
//
// // Add FriendlyErrorsPlugin
// devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
// compilationSuccessInfo: {
// messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
// },
// onErrors: config.dev.notifyOnErrors
// ? utils.createNotifierCallback()
// : undefined
// }))
//
// resolve(devWebpackConfig)
// }
// })
// })
//end
module.exports = devWebpackConfig;

"scripts": {
 "dev": "node build/webpack.dev.client.js",
 "start": "npm run dev",
 "build": "node build/build.js"
 },

//雙路由 私服一層控制私服路由 vue的路由控制該頁面下的路由
app.use(router)
app.use('/static', express.static(path.join(assetsRoot, 'static')));

assetsRoot: path.resolve(__dirname, '../dist'),

context.compiler.hooks.invalid.tap('WebpackDevMiddleware', invalid);

npm uninstall webpack-dev-middleware

npm install webpack-dev-server@2.10.0 --save-dev

npm run dev