手把手教你 vue-cli 單頁到多頁應用

發表於2018-06-05

Vue

vue-cli到多頁應用

前言：我有一個cli建立的vue專案，但是我想做成多頁應用，怎麼辦，廢話不多說，直接開擼~

約定：新增程式碼部分在//add和//end中間刪除(註釋)程式碼部分在//del和//end中間，很多東西都寫在註釋裡

第一步：cli一個vue專案

新建一個vue專案官網 vue init webpack demo
cli預設使用webpack的dev-server服務，這個服務是做不了單頁的，需要手動建一個私服叫啥你隨意一般叫dev.server或者dev.client

第二步：新增兩個方法處理出口入口檔案（SPA預設寫死的）

進入剛剛建立vue專案 cd demo
在目錄下面找到build/utils.js檔案
修改部分：

utils.js

'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，那麼後面私服加入的檔案監控器就會從src下面的views下面開始監控檔案
//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  新增一個方法處理入口檔案（單頁應用的入口都是寫死，到時候替換成這個方法）
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] = process.env.NODE_ENV === 'development' ?
        [
          'webpack-hot-middleware/client?noInfo=true&reload=true&path=/__webpack_hmr&timeout=20000',
          entry
        ]: [entry];
    }
  });
  return entries;
};
//end

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

  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
        };
        // 在構建生產環境時，需要指定共用模組
        conf.chunks = [...publicModule, ...conf.chunks];
      }

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

'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，那麼後面私服加入的檔案監控器就會從src下面的views下面開始監控檔案

//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 新增一個方法處理入口檔案（單頁應用的入口都是寫死，到時候替換成這個方法）

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] = process.env.NODE_ENV === 'development' ?

[

'webpack-hot-middleware/client?noInfo=true&reload=true&path=/__webpack_hmr&timeout=20000',

entry

]: [entry];

}

});

return entries;

};

//end

//add 新增出口檔案

exports.createHtmlWebpackPlugin = (publicModule) => {

let files = glob.sync(pagePath + '/**/*.html', {matchBase: true});

let entries = exports.createEntry();

let plugins = [];

let conf;

let basename;

let foldername;

publicModule = publicModule || [];

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

};

// 在構建生產環境時，需要指定共用模組

conf.chunks = [...publicModule, ...conf.chunks];

}

plugins.push(new HtmlWebpackPlugin(conf));

}

});

return plugins;

};

//end

第三步：建立私服（不使用dev-server服務，自己建一個）

從express新建私服並配置(build資料夾下新建我這裡叫webpack.dev.client.js)

webpack.dev.client.js

/**
 * 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');   //檔案監控(前面配置了從views下面監控)
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`);
})

100

101

102

/**

* 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'); //檔案監控(前面配置了從views下面監控)

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`);

})

私服建立好了安裝下依賴
有坑。。。
webpack和熱載入版本太高太低都不行
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

第四步：修改配置

webpack.base.conf.js

'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固定的單頁出口  末尾動態配上出口
    // 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

100

101

'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固定的單頁出口末尾動態配上出口

// 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

webpack.dev.conf.js

'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')

process.env.NODE_ENV = 'development';

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的伺服器
  // 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固定的單頁出口  末尾動態配上出口
    // 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;

100

101

102

103

104

105

106

'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')

process.env.NODE_ENV = 'development';

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的伺服器

// 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固定的單頁出口末尾動態配上出口

// 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;

webpack.prod.conf.js

plugins最後加上.concat(utils.createHtmlWebpackPlugin([‘manifest’, ‘vendor’]))
test環境一樣

第五步：修改package.json 指令配置

scripts下面’dev’:
這樣執行的時候就不會走預設的dev-server而走你的私服了

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

"scripts": {

"dev": "node build/webpack.dev.client.js",

"start": "npm run dev",

"build": "node build/build.js"

第六步：建立測試檔案

src目錄下新建 views資料夾（程式碼註釋裡有當時配的目錄跟這個一致就可以隨便你命名遵循命名規範就行）
views 資料夾下新建兩個資料夾index和home 代表多頁每頁單獨一個資料夾資料夾下建對應檔案

打包改為相對路徑config/index.js
build下面

assetsPublicPath: '/',   =>   assetsPublicPath: './',

1	assetsPublicPath: '/', => assetsPublicPath: './',

最後，npm run dev 或者 npm run build

測試環境自己配跟生產環境差不多，就幾個配置引數不一樣

這個時候你會發現，特麼的什麼鬼文章報錯了啊
稍安勿躁~
兩個地方，

1.webpack.dev.client.js

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

//雙路由私服一層控制私服路由 vue的路由控制該頁面下的路由

app.use(router)

app.use('/static', express.static(path.join(assetsRoot, 'static')));

這個assetsRoot cli建立的時候是沒有的在config/index.js 下面找到dev加上

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

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

2.還是版本問題

webpack-dev-middleware 預設是3.1.3版本但是會報錯
具體哪個版本不報錯我也不知道

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

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

找不到invalid 原始碼裡面是有的
解除安裝webpack-dev-middleware

npm uninstall webpack-dev-middleware

1	npm uninstall webpack-dev-middleware

使用dev-server自帶的webpack-dev-middleware （cli單頁應用是有熱載入的）
重新install dev-server

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

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

npm run dev

1	npm run dev

總結：核心點就在建立並配置私服和修改出口入口配置，坑就在版本不相容

建議：cli一個vue的demo專案從頭擼一遍再在實際專案裡使用，而不是copy一下執行沒問題搞定~
建議而已，你怎麼打人，嗚嗚嗚~

快過節了，覺得本文對你有用的話請隨意打賞，讓作者可以買個棒棒糖吃~

——————————————-6.1更—————————————–
留了一個坑，一天了，有贊有收藏，沒見人評論指出坑，心痛的無法呼吸~

build 後沒有引入共用模組

程式碼已更新~ build後可正常訪問…

注：內容有不當或者錯誤處請指正~轉載請註明出處~謝謝合作！

單頁面應用和多頁面應用
2020-04-04
vue單頁到多頁
2019-03-29
Vue
webpack 搭建vue多單頁應用
2018-03-18
WebVue
前端：你要懂的單頁面應用和多頁面應用
2019-03-04
前端
基於vue-cli的多頁面應用腳手架
2018-03-06
Vue
Vue單頁及多頁應用全域性配置404頁面實踐
2018-05-20
Vue
vue-cli多頁面應用實踐，實現元件預覽
2022-05-26
Vue元件
手把手教你快應用接入微信H5網頁支付
2021-05-26
H5網頁
一文讀盡前端路由、後端路由、單頁面應用、多頁面應用
2019-10-22
前端路由後端
使用vue-cli腳手架工具建立一個簡單的單頁應用
2021-09-09
Vue
vonic單頁面應用
2018-06-25
VUE 單頁面應用修改頁面title
2018-10-22
Vue
小白指南：手把手教你用低程式碼開發一個應用頁面
2023-02-17
webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架
2018-09-04
WebVueiOS框架
vue-cli多頁面腳手架
2018-04-25
Vue
nginx + 一個埠部署多個單頁應用（history模式）
2019-01-19
Nginx模式
使用webpack構建多頁應用
2019-04-09
Web
Vue多頁應用腳手架
2019-03-03
Vue
VUE單頁應用骨架屏方案
2019-01-16
Vue
使用 Vue + Flask 搭建單頁應用
2019-05-13
VueFlask
手寫單頁面應用路由
2024-11-27
路由
單頁應用的優缺點
2022-11-22
vue-cli多頁面history模式-問題解答
2021-12-01
Vue模式
vue-cli 跳轉到頁面指定位置
2024-10-25
Vue
手把手教你開發 MyBatis 分頁外掛
2024-03-07
MyBatis
webpack 構建多頁面應用——初探
2018-12-19
Web
webpack如何打包多頁面應用(mpa)
2019-11-07
Web
Webpack多頁應用HMR卡住問題
2019-04-23
Web
vue-cli 3.x 構建新專案，實現多頁，單頁webapp，並一鍵自動打包部署到測試環境
2018-12-16
VueWebAPP
微信單頁應用的那些事
2019-03-12
Webpack 4 和單頁應用入門
2018-04-18
Web
幽默：為單頁應用SPA辯護
2022-06-03
動態構建的多頁面vue-cli模版
2018-05-27
Vue
教你用Xd做網頁
2020-07-23
網頁
webpack4 + react 搭建多頁面應用
2019-02-16
WebReact
5分鐘掌握 webpack 多頁應用配置
2018-11-22
Web
用微前端的方式搭建類單頁應用
2019-03-03
前端
Render函式在Vue多頁面應用中的應用
2018-11-14
函式Vue

手把手教你 vue-cli 單頁到多頁應用

vue-cli到多頁應用

第一步：cli一個vue專案

第二步：新增兩個方法處理出口入口檔案（SPA預設寫死的）

第三步：建立私服（不使用dev-server服務，自己建一個）

第四步：修改配置

第五步：修改package.json 指令配置

第六步：建立測試檔案

測試環境自己配 跟 生產環境差不多，就幾個配置引數不一樣

總結：核心點就在建立並配置私服和修改出口入口配置，坑就在版本不相容

相關文章

測試環境自己配跟生產環境差不多，就幾個配置引數不一樣