分类导航

Vue 发布时间：2022-04-21 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了手把手教你vue-cli单页到多页应用的方法，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_673_0@

vue-cli到多页应用

@H_673_0@前言：我有一个cli创建的vue项目，但是我想做成多页应用，怎么办，废话不多说，直接开撸~

@H_673_0@约定：新增代码部分在//add和//end中间删除(注释)代码部分在//del和//end中间，很多东西都写在注释里

@H_673_0@

第一步：cli一个vue项目

@H_673_0@新建一个vue项目官网 vue init webpack demo

@H_673_0@cli默认使用webpack的dev-server服务，这个服务是做不了单页的，需要手动建一个私服叫啥你随意一般叫dev.server或者dev.client

@H_673_0@

第二步：添加两个方法处理出口入口文件（SPA默认写死的）

@H_673_0@进入刚刚创建vue项目 cd demo

@H_673_0@在目录下面找到build/utils.js文件

@H_673_0@修改部分：

@H_673_0@utils.js

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

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

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

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

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

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

@H_673_0@// generate loader String to be used with extract text plugin
function generateLoaders (loader,loaderOptions) {
const loaders = optionS.UsePostCSS ? [cssLoader,postcssLoader] : [cssLoader]

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

@H_673_0@// 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)
}
}

@H_673_0@// 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')
}
}

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

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

@H_673_0@return output
}

@H_673_0@exports.createNotifierCallBACk = () => {
const notifier = require('node-notifier')

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

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

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

@H_673_0@//add 新增一个方法处理入口文件（单页应用的入口都是写死，到时候替换成这个方法）
exports.createEntry = () => {
let files = glob.sync(pagePath + '/*/.js');
let entries = {};
let basename;
let foldername;

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

@H_673_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

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

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

@H_673_0@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
};
}

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