最近公司需求，参考了很多资料，自己搭了一个小demo。
一、安装
- 1.Vue CLI 3需要 nodeJs ≥ 8.9 ，查看node版本升级
- 2.安装vue-cli3，npm install -g @vue/cli，查看版本vue -V
二、使用
- 1.vue create projectname 搭建新项目：vue create hello-world
选择默认(基本的 Babel + ESLint)配置，还是手动配置，上下键控制 vue-cli3.0在你创建后会有一个保存当前配置的功能 因为之前创建过，提供保存配置的功能,这里选最后一个手动配置
vue.config.js是需要自己建的，来配置webpack
main.js 为入口文件
vue.config.js 为项目配置文件，详细配置可以看官方文档 详细config配置
我把自己的项目目录建成这样
主要是APP.vue
<template>
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<br />
<div>
<a href="ui.html">跳转新的页面</a>
</div>
<router-view />
</div>
</template>
<script>
export default {
data () {
return {}
},
mounted () {
console.log(this)
console.log(this.$router)
}
}
</script>
<style>
#nav {
background: cadetblue;
text-align: center
}
#nav>a {
display: inline;
padding: 5px 10px;
}
</style>
复制代码对应的主文件main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
复制代码对应的router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './About.vue')
}
]
})
复制代码另一个ui文件下的也类似，ui.vue
<template>
<div id="nav">
<router-link to="/">page1</router-link>
<router-link to="/page2">page2</router-link>
<br />
<div>
<a href="index.html">跳转新的页面</a>
</div>
<router-view />
</div>
</template>
<style>
#nav {
background: violet;
text-align: center
}
#nav>a {
display: inline;
padding: 5px 10px;
}
</style>
复制代码对应的main.js
import Vue from 'vue'
import Ui from './ui.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(Ui)
}).$mount('#app')
复制代码对应的router.js
import Vue from 'vue'
import Router from 'vue-router'
import Page from './page1.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'page',
component: Page
},
{
path: '/page2',
name: 'page2',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './page2.vue')
}
]
})
复制代码运行npm run serve 之后可以通过a标签跳转不同的
想法根据不同指令打包不同文件
let objectProject = {
index: {
entry: 'src/views/index/main.js', // page 的入口
template: 'public/index.html', // 模板来源
filename: 'index.html', // 在 dist/index.html 的输出
// 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
ui: {
entry: 'src/views/ui/main.js',
template: 'public/ui.html',
filename: 'ui.html',
title: 'Index Page',
chunks: ['chunk-vendors', 'chunk-common', 'ui']
}
}
let page = {}
let projectname = process.argv[3] // 获取build后面的参数确定执行哪个文件
if (process.env.NODE_ENV == 'development') {
page = objectProject//判断开发环境不用
} else {
//假如命令npm run build-index,
//就会得到projectname=index
page[projectname] = objectProject[projectname]
// {
// index: {
// entry: 'src/views/index/main.js',
// template: 'public/index.html',
// filename: 'index.html',
// chunks: ['chunk-vendors', 'chunk-common', 'index']
// }
// }
}
module.exports = {
publicPath: '/', // 官方要求修改路径在这里做更改，默认是根目录下，可以自行配置
outputDir: 'dist'+projectname, //标识是打包哪个文件
pages: page,
productionSourceMap: false,
devServer: {
open: true, // 项目构建成功之后，自动弹出页面
host: 'localhost', // 主机名，也可以127.0.0.0 || 做真机测试时候0.0.0.0
port: 8081, // 端口号，默认8080
https: false, // 协议
hotOnly: false // 没啥效果，热模块，webpack已经做好了
}
}
复制代码打包之后效果，但是也能看见打包同时两个html页面没分开
这样就简单完成 demo源码：github.com/chenshuang0…
四、优化（下面是网上查的优化思路，只提供大家参考，后续会继续更新）
早期版本的vue-cli和webpack2时代，网上流传以下优化配置，但其实新版本的vue-cli和webpack3已经不需要
使用ParallelUglifyPlugin替换UglifyPlugin（新版本的UglifyPlugin已经支持且默认开启了多线程并行构建，所以此步骤没有必要）
启用webpack3的Scope Hoisting（vue-cli新版本已经配置webapck3，且已经默认开启此配置）
善用alias（新版本vue-cli已经进行此项工作）
配置CommonsChunkPlugin提取公用代码（新版本vue-cli已经进行此项工作）
对于新版本的vue-cli和webpack3，以下简单配置优化后可提升最少2倍的构建速度
按需引用
启用happypack多核构建项目
修改source-map配置
启用DllPlugin和DllReferencePlugin预编译库文件
实践
- 1、按需引用
- 2、启用happypack多核构建项目
- 3.1修改prod环境：productionSourceMap:false（关闭source-map）
- 3.2关闭生产环境的调试信息
- 4、启用DllPlugin和DllReferencePlugin预编译库文件 这是最复杂也是提升效果最明显的一步，原理是将第三方库文件单独编译打包一次，以后的构建都不需要再编译打包第三方库
4.1 增加build/webpack.dll.config.js文件，并在其中配置需要单独DLL化的模块
const path = require("path")const webpack = require("webpack")module.exports = { // 你想要打包的模块的数组 entry: { vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview'] }, output: { path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置 filename: '[name].dll.js', library: '[name]_library' }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, '.', '[name]-manifest.json'), name: '[name]_library', context: __dirname }), // 压缩打包的文件 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] } 4.2 在build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 增加如下插件
new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./vendor-manifest.json') }) 4.3 在/package.json增加命令
"dll": "webpack --config ./build/webpack.dll.config.js" 4.4 在/index.html增加DLL化JS引入（必须首先引入）
4.5 执行构建
npm run dll（这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js） npm run dev 或 npm run build
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
