vue-2.0的vue-cli安装:
使用脚手架工具 vue-cli 可以快速地构建项目
安装过程:
1、全局安装 : npm install -g vue-cli
2、初始化webpack: vue init webpack my-test(工程名称)
3、根据提示走
4、进入你的工程目录 : cd my-test
5、下载所有配置文件的内容: npm install
6、热加载(启动服务器): npm run dev
注:第六步如果报错,node.js版本问题所导致,重新下载一个新的版本;
vue-3.0的vue-cli:
最近上手试了试vue-cli(v3.0.0-rc.5),小结一下
在一般项目中我们针对不同的开发环境会配置不同的环境变量:
.env.development
,.env.production
,.env.release
//.env.development
NODE_ENV=development
VUE_APP_XXX=XXX
...
//.env.production
NODE_ENV=production
VUE_APP_XXX=XXX
outputDir=dist
//.env.release
NODE_ENV=production
VUE_APP_XXX=XXX
outputDir=release
vue.config.js
配置module.exports={
...
outputDir: process.env.outputDir,
...
}
3.package.json
配置
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"release": "vue-cli-service build --mode release",
"lint": "vue-cli-service lint"
},
4.打包命令
npm run build
打包正式版本:npm run release
打包好的文件分别放在dist
/release
中
修改vue.config.js
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports={
...
// 将接收ChainableConfig由webpack-chain提供支持的实例的函数。
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('assets',resolve('src/assets'))
.set('components',resolve('src/components'))
},
...
}
修改vue.config.js
module.exports={
...
// 代理相关配置
devServer: {
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // string | Object
},
...
}
1.安装插件
npm install --save -dev uglifyjs-webpack-plugin compression-webpack-plugin
2.vue.config.js
配置
//去console插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//gzip压缩插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports={
...
// webpack插件配置
configureWebpack: config => {
let plugins = [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
}),
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
['js', 'css'].join('|') +
')$',
),
threshold: 10240,
minRatio: 0.8,
}),
]
if (process.env.NODE_ENV !== 'development') {
config.plugins = [...config.plugins, ...plugins]
}
},
...
}
可直接拷贝到自己项目中自定义修改
module.exports = {
// 基本路径
baseUrl: '/',
// 输出文件目录
outputDir: 'dist',
// 用于嵌套生成的静态资产(js,css,img,fonts)的目录。
//assetsDir: '',
// 以多页模式构建应用程序。
pages: undefined,
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 是否使用包含运行时编译器的Vue核心的构建。
runtimeCompiler: false,
// 默认情况下babel-loader忽略其中的所有文件node_modules。
transpileDependencies: [],
// 生产环境sourceMap
productionSourceMap: true,
// webpack配置
configureWebpack: () => {},
chainWebpack: () => {},
// css相关配置
css: {
// 启用 CSS modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
},
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// PWA 插件相关配置
pwa: {},
// 第三方插件配置
pluginOptions: {
// ...
}
}
未完待续…