脚手架4.5.12搭建vue2项目
2021-04-23 本文已影响0人
背着生活往前走你才辨的出美和丑
vue create <Project Name> //文件名 不支持驼峰（含大写字母）
前两项默认，选择第三项手动
选择自己需要的
选择手动后需要选择配置项：
> ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) Choose Vue version。 // 选择vue版本
(*) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
(*) Router // vue-router（vue路由）
(*) Vuex // vuex（vue的状态管理模式）
(*) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试
选择2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes 路由器使用历史模式?
?Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) Sass/SCSS (with dart-sass)，选择一个CSS预处理器
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files 您喜欢在哪里放置Babel、ESLint等的配置。？在专用配置文件中
? Save this as a preset for future projects? No 是否将此保存为将来项目的预设
vue.config.js配置
// vue.config.js
const path = require('path');
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/', // 公共路径
indexPath: 'index.html', // 相对于打包路径index.html的路径
outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: !IS_PROD, // 生产环境的 source map
parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
pwa: {}, // 向 PWA 插件传递选项。
chainWebpack: config => {
config.resolve.symlinks(true); // 修复热更新失效
// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
config.plugin("html").tap(args => {
// 修复 Lazy loading routes Error
args[0].chunksSortMode = "none";
return args;
});
config.resolve.alias // 添加别名
.set('@', resolve('src'))
.set('@assets', resolve('src/assets'))
.set('@components', resolve('src/components'))
.set('@views', resolve('src/views'))
.set('@store', resolve('src/store'));
},
css: {
extract: IS_PROD,
requireModuleExtension: false,// 去掉文件名中的 .module
loaderOptions: {
// 给 less-loader 传递 Less.js 相关选项
less: {
// `globalVars` 定义全局对象，可加入全局变量
globalVars: {
primary: '#333'
}
}
}
},
// configureWebpack: {
// optimization: {
// minimizer: [
// new UglifyJsPlugin({
// uglifyOptions: {
// // 删除注释
// output: {
// comments: false
// },
// // 删除console debugger 删除警告
// compress: {
// warnings: false,
// drop_console: true,//console
// drop_debugger: false,
// pure_funcs: ['console.log']//移除console
// }
// }
// })
// ]
// }
// },
devServer: {
overlay: { // 让浏览器 overlay 同时显示警告和错误
warnings: true,
errors: true
},
host: "localhost",
port: 8090, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
hotOnly: true, // 热更新
// proxy: 'http://localhost:8080' // 配置跨域处理,只有一个代理
// proxy: { //配置多个跨域
// "/api": {
// target: "http://172.11.11.11:7071",
// changeOrigin: true,
// // ws: true,//websocket支持
// secure: false,
// pathRewrite: {
// "^/api": "/"
// }
// },
// "/api2": {
// target: "http://172.12.12.12:2018",
// changeOrigin: true,
// //ws: true,//websocket支持
// secure: false,
// pathRewrite: {
// "^/api2": "/"
// }
// },
// }
},
}
上一个vue.config.js常用配置。
// vue.config.js
const path = require('path');
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 console.log
module.exports = {
publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "./", // 默认'/'，部署应用包时的基本 URL
indexPath: 'index.html', // 相对于打包路径index.html的路径
outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: !IS_PROD, // 生产环境的 source map
parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
pwa: {}, // 向 PWA 插件传递选项。
chainWebpack: config => {
config.resolve.symlinks(true); // 修复热更新失效
// 添加别名
config.resolve.alias
.set('@', resolve('src'))
.set('@api', resolve('src/api'))
.set('@tools', resolve('src/tools'))
.set('@assets', resolve('src/assets'))
.set('@components', resolve('src/components'))
.set('@views', resolve('src/views'))
.set('@router', resolve('src/router'))
.set('@store', resolve('src/store'))
.set('@jsonData', resolve('src/jsonData'));
// 压缩图片
// if (IS_PROD) {
// config.module
// .rule("images")
// .use("image-webpack-loader")
// .loader("image-webpack-loader")
// .options({
// mozjpeg: { progressive: true, quality: 65 },
// optipng: { enabled: false },
// pngquant: { quality: [0.65, 0.9], speed: 4 },
// gifsicle: { interlaced: false }
// // webp: { quality: 75 }
// });
// }
},
css: {
loaderOptions: {
sass: {
prependData: `@import "./src/assets/css/default";`,
},
},
},
// 去掉console.log
configureWebpack: config => {
if (IS_PROD) {
const plugins = [];
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ["console.log"] //移除console
}
},
sourceMap: false,
parallel: true
})
);
config.plugins = [...config.plugins, ...plugins];
}
},
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: '国电电力宁夏新能源集中监控系统',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
},
devServer: {
open: true, // 是否打开浏览器
}
}
再来一个比较全的vue.config.js，专业的配置地址：
https://github.com/staven630/vue-cli4-config
