vue从零搭建后台管理系统(一)vue.config.js等配置

面向有一定前端基础的同学(简单会用HTML5、CSS3、javascript相关语法即可) 一 、准备工作(熟悉此过程的可以跳过本章节) Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 详细异步>>https://cli.vuejs.org/zh/guide/ 另附上github地址,以下为2020/03/19新建项目记录,也是进行这次计划的第一步 https://github.com/a307420929/Vue-management-system image.png 在本地通过Vue CLI初始化一个Vue项目 这里会让你选一些基本的配置项,我这里选择了Babel,Router,Vuex,Linter 剩下的就一路回车就好 image.png 格式化完后,本地应该有以下文件夹,一个纯净的Vue项目 image.png 接着上面vue create的命令,在控制台输入如下: image.png 打开Chrome 输入 http://localhost:8080/,显示如下,此时一个纯净的Vue项目就算在本地跑起来了 image.png 二 、基于初始化环境开始配置我们的项目 因为是后台管理系统,很明显上面的页面并不是我们想要的样子,所以先把一部分没有用的代码删除,让开始的代码看起来更加舒适,大道至简 细心的同学可能会发现怎么没有build文件夹,这是因为 vue-cli 3 学习了 rollup 的零配置思路,所以项目初始化后,没有了以前熟悉的 build 目录,也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。 其实一切都是因为 vue-cli 3 的项目初始化,帮开发者已经解决了 80% ,甚至绝大部分情形下的 webpack 配置,但是当我们想个性化自己的配置,我们就需要vue.config.js文件了 新建vue.config.js 在根目录新建vue.config.js,具体配置项参考下列代码,只是参考,具体情况试自己项目而定 image.png const path = require('path') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin function resolve(dir) { return path.join(__dirname, dir) } module.exports = { // 基本路径 vue-cli3.3+新版本使用 publicPath vue-cli3.3以下版本使用baseUrl publicPath: "./", /* 输出文件目录:在npm run build时,生成文件的目录名称 */ outputDir: 'dist', /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */ assetsDir: "static", /* 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度 */ productionSourceMap: false, /* 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */ filenameHashing: false, /* 代码保存时进行eslint检测 */ lintOnSave: true, /* webpack-dev-server 相关配置 */ devServer: { /* 自动打开浏览器 */ open: true, host: '0.0.0.0', port: 8077, https: false, hotOnly: false, /* 使用代理 */ // proxy: { //配置自动启动浏览器 // "/XX/*": { // target: "http://172.11.11.11:7071", // changeOrigin: true, // // ws: true,//websocket支持 // secure: false // }, // "/XX2/*": { // target: "http://172.12.12.12:2018", // changeOrigin: true, // //ws: true,//websocket支持 // secure: false // }, // } }, // webpack 配置,键值对象时会合并配置,为方法时会改写配置 // https://cli.vuejs.org/guide/webpack.html#simple-configuration configureWebpack: (config) => { // 简单/基础配置,比如引入一个新插件 //生产and测试环境 let pluginsPro = [ // Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer) new BundleAnalyzerPlugin(), ]; //开发环境 let pluginsDev = [ // //移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin https://github.com/Tencent/vConsole) // new vConsolePlugin({ // filter: [], // 需要过滤的入口文件 // enable: true // 发布代码前记得改回 false // }), ]; if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development' config.plugins = [...config.plugins, ...pluginsPro]; } else { // 为开发环境修改配置... config.plugins = [...config.plugins, ...pluginsDev]; } }, chainWebpack: (config) => { // 链式配置 config.resolve.alias.set('styles', resolve('src/assets/styles')) }, // css相关配置 css: { // 启用 CSS modules requireModuleExtension: false, // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: { sass: { //设置css中引用文件的路径,引入通用使用的scss文件(如包含的@mixin) data: ` $baseUrl: "/"; @import '@/assets/scss/_common.scss'; ` } }, }, // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader pluginOptions: { 'style-resources-loader': { //https://github.com/yenshih/style-resources-loader preProcessor: 'scss', //声明类型 'patterns': [ //path.resolve(__dirname, './src/assets/scss/_common.scss'), ], //injector: 'append' } } } babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ] } 3..eslintrc.js module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', 'eslint:recommended' ], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' } } 以上, 如有问题,欢迎批评指正 后续会在此基础上继续更新,感谢欢迎关注支持

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):