vue-cli-multipage

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

主要功能

- 使用了vue-router路由，多页面多路由不冲突
- 使用了vuex状态管理
- 使用axios库，简单封装了一个库
- 使用了eslint代码规范检测 默认关闭 打开在vue.config.js中设置lintOnSave: true
- 配置了css预设器配置项

暂时并没有将UI组件库使用进来，原因是这是一个多页面多路由的vue-cli3初始化包，如果需要可以自行安装即可。

如果你要做APP那么可以考虑看看我 vue-cli3-app-init 里面安装的插件、配置文件以及推荐的UI组件
如果你要做web那么可以考虑看看我 vue-cli3-web-init 里面安装的插件、配置文件以及推荐的UI组件当然，有了这个初始包之后，你可以自由发挥。O(∩_∩)O~

多页面多路由使用了两种方案

你可以根据自己爱好选择其中一种，文件配置目录在vue.config.js中

dist打包目录

第一种

 dist
  ├─about
  │  └─js
  ├─chunk-vendors
  │  └─js
  ├─img
  ├─index
  │  ├─css
  │  └─js
  ├─page1
  │  ├─css
  │  └─js
  └─page2
      ├─css
      └─js

第二种

dist
  ├─css
  │  └─index.bc622c39.css
  │  └─page1.aaf0ae55.css
  │  └─page2.db92da3f.css
  ├─js
  |  └─about.1644de76.js
  |  └─chunk-vendors.19368321.js
  |  └─index.31851ae9.js
  |  └─page1.0c42efc5.js
  |  └─page2.06218d45.js
  ├─img
  |  └─logo.82b9c7a5.png
  ├─favicon.ico
  ├─index.html
  ├─page1.html
  └─page2.html

2019年1月8日09:27:58 更新功能

配置热启动，应有需要的朋友要求，就给配置上了，如果你不喜欢（我就不是很喜欢哈哈），可以package.json中将serve: "vue-cli-service serve --open" 中的 "--open"删除即可

run build error:Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`

#具体错误

ERROR TypeError: Cannot read property '__expression' of undefined

TypeError: Cannot read property '__expression' of undefined
at Object.toConfig (/Users/mima123/ht_testVersion/ht_project/node_modules/webpack-chain/src/Plugin.js:55:38)
at clean.Object.assign.plugins.plugins.values.map.plugin (/Users/mima123/ht_testVersion/ht_project/node_modules/webpack-chain/src/Config.js:129:61)
at Array.map ()
at module.exports.toConfig (/Users/mima123/ht_testVersion/ht_project/node_modules/webpack-chain/src/Config.js:129:40)
at Service.resolveWebpackConfig (/Users/mima123/ht_testVersion/ht_project/node_modules/@vue/cli-service/lib/Service.js:218:34)
at PluginAPI.resolveWebpackConfig (/Users/mima123/ht_testVersion/ht_project/node_modules/@vue/cli-service/lib/PluginAPI.js:115:25)
at module.exports (/Users/mima123/ht_testVersion/ht_project/node_modules/@vue/cli-service/lib/commands/build/resolveAppConfig.js:34:25)
at build (/Users/mima123/ht_testVersion/ht_project/node_modules/@vue/cli-service/lib/commands/build/index.js:124:50)
at api.registerCommand (/Users/mima123/ht_testVersion/ht_project/node_modules/@vue/cli-service/lib/commands/build/index.js:72:13)
at Service.run (/Users/mima123/ht_testVersion/ht_project/node_modules/@vue/cli-service/lib/Service.js:203:12)
at Object. (/Users/mima123/ht_testVersion/ht_project/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: vue-cli-service build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mima123/.npm/_logs/2019-03-21T10_55_05_330Z-debug.log

#配置文件
#/**

方案
生成的文件为
-dist
- css
```
 - index.xxx.css
```
```
 - page1.xxx.css
```
```
 - page2.xxx.css
```
- img
- index.html
- page1.html
- page2.html
  */
  let path = require('path')
  let glob = require('glob')
  //配置pages多页面获取当前文件夹下的html和js
  function getEntry(globPath) {
  let entries = {},
  basename, tmp, pathname;
glob.sync(globPath).forEach(function(entry) {
basename = path.basename(entry, path.extname(entry));
// console.log(entry)
tmp = entry.split('/').splice(-3);
pathname = basename; // 正确输出js和html的路径
```
// console.log(pathname)
entries[pathname] = {
	entry: 'src/' + tmp[0] + '/' + tmp[1] + '/main.js',
	template: 'src/' + tmp[0] + '/' + tmp[1] + '/' + tmp[2],
	title:  tmp[2],
	filename: tmp[2]
};
```
});
return entries;
}

let pages = getEntry('./src/pages/**?/*.html');
//配置end
module.exports = {
lintOnSave: false, //禁用eslint
productionSourceMap: false,
pages,
devServer: {
index: 'index.html', //默认启动serve 打开index页面
open: process.platform === 'darwin',
host: '',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
// css相关配置
css: {
extract: false, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps?
loaderOptions: {
less: {
javascriptEnabled: true
}
}, // css预设器配置项
modules: false // 启用 CSS modules for all css / pre-processor files.
},
// 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
parallel: require('os').cpus().length > 1,

chainWebpack: config => {
	config.module
		.rule('images')
		.use('url-loader')
		.loader('url-loader')
		.tap(options => {
			// 修改它的选项...
			options.limit = 100
			return options
		})
	Object.keys(pages).forEach(entryName => {
		config.plugins.delete(`prefetch-${entryName}`);
	});
	if(process.env.NODE_ENV === "production") {
		config.plugin("extract-css").tap(() => [{
			path: path.join(__dirname, "./dist"),
			filename: "css/[name].[contenthash:8].css"
		}]);
	}
},
configureWebpack: config => {
	if(process.env.NODE_ENV === "production") {
		config.output = {
    path: path.join(__dirname, "./dist"),
    publicPath: "/",        
			filename: "js/[name].[contenthash:8].js"			
		};
	}
}

}

lance-yi / vue-cli3-multipage Goto Github PK

vue-cli3-multipage's Introduction

vue-cli-multipage

Project setup

Compiles and hot-reloads for development

Compiles and minifies for production

Lints and fixes files

主要功能

多页面多路由使用了两种方案

dist打包目录

2019年1月8日09:27:58 更新功能

vue-cli3-multipage's People

Stargazers

Watchers

Forkers

vue-cli3-multipage's Issues

ERROR TypeError: Cannot read property '__expression' of undefined

Recommend Projects

Recommend Topics

Recommend Org