vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

参考文档 https://cli.vuejs.org/zh/

1.安装
npm install -g @vue/cli
2.检查安装
vue -V
3.创建项目
vue create project_name
出现下图信息

4.上图两种选择方式,第一种是默认的,第二种自己选择配置
  这里一般选择第二种自己配置,点击回车键后出现下图信息

5.在上图中选择你需要的模块,上下移动,空格进行确定,下图是测试选择的

6.选好后,敲Enter键,接着选择

7.选择完毕后,一路Enter,到下图

8.模板创建完成,目录如下

9.配置测试环境接口,线上服务器环境接口
(通过在项目根目录下新建.env    .env.development  .env.production文件来控制)
如下图
关于这一块的信息,请查看[环境配置](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%A4%BA%E4%BE%8B%EF%BC%9Astaging-%E6%A8%A1%E5%BC%8F)

在目录里加入了3个文件
.env.development 开发环境文件
.env.production 线上环境文件

在上边3个文件中:
使用VUE_APP_URL = “接口url”
书写格式:VUE_APP_[自定义name]

配置打包环境

打包后在本地预览,你需要启动一个node服务:
1.npm install -g serve  //全局安装服务
2.serve -s dist   // 启动服务预览
获取当前的环境:
console.log(process.env.VUE_APP_URL)

10. 其它配置写在.vue.config.js文件中
在根目录下新建
包括端口号,代理跨域,热更新,多入口等,具体参考官方api
https://cli.vuejs.org/zh/config/#vue-config-js

vue.config.js(部分配置)

const path = require('path');

module.exports = {
    publicPath:'/',    // 公共路径
    outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 不同的环境打不同包名
    css: {  // 一次配置,全局使用,这个scss 因为每个文件都要引入
        loaderOptions: {
            sass: {
                data: `@import "./src/assets/hotcss/px2rem.scss";`
            }
        }
    },
    lintOnSave:false,  // 关闭eslint
    productionSourceMap:true,  // 生产环境下css 分离文件
    devServer:{   // 配置服务器
        port:8081,
        open:true,
        https:false,
        overlay: {
            warnings: true,
            errors: true
        }
    },
    configureWebpack:{  // 覆盖webpack默认配置的都在这里
        resolve:{   // 配置解析别名
            alias:{
                '@':path.resolve(__dirname, './src'),
                '@h':path.resolve(__dirname, './src/assets/hotcss'),
                '@s':path.resolve(__dirname, './src/assets/style'),
                '@i':path.resolve(__dirname, './src/assets/images'),
            }
        }
    }
}

到此这篇关于vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程的文章就介绍到这了,更多相关vue cli3.0环境打包配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue.config.js打包优化配置

    百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻 优化方向 1.图片资源压缩 2.将 productionSourceMap 设为 false,map不进行生成 3.cdn配置(可选) 4.代码压缩 5.公共代码抽离(个人感觉没啥用) 未优化之前的 //感觉太大了 抬它 优化之后的 废话不多说了,上代码是重点 这些是必要的下载 /*cnpm install image-webpack-loader --save-dev c

  • vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

    参考文档 https://cli.vuejs.org/zh/ 1.安装 npm install -g @vue/cli 2.检查安装 vue -V 3.创建项目 vue create project_name 出现下图信息 4.上图两种选择方式,第一种是默认的,第二种自己选择配置  这里一般选择第二种自己配置,点击回车键后出现下图信息 5.在上图中选择你需要的模块,上下移动,空格进行确定,下图是测试选择的 6.选好后,敲Enter键,接着选择 7.选择完毕后,一路Enter,到下图 8.模板创建

  • vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项   -d

  • Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录 语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build

  • 详解如何配置vue-cli3.0的vue.config.js

    本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue

  • 在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

    你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus).如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理.你也可以手动安装相应的 webpack loader: # Sass npm install -D sass-loader node-sass # Less npm install -D less-loader less # Stylus npm install -D stylus-loader stylus 然后你就可以导入相应的文件类型,或在

  • vue-cli3中vue.config.js配置教程详解

    前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的

  • vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

    使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了,一直没机会升级3.0版本 开始零零碎碎开始写一些功能,顺便分享一下 const path = require('path') const glob = require('glob') /** 获取多页的入口脚本和模板 */ const getPages = (() => { const [ globPathHtml, globPathJs, pages, tempSet ] = [ ['./src/modules/**/in

  • 解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    1.在vue项目根目录下新建vue.config.js(不是在src下面) vue.config.js配置文件: module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vu

  • vue3.0 vue.config.js 配置基础的路径问题

    目录 vue3.0 vue.config.js 配置基础路径 vue3.0+ 3.x config配置 vue3.0 vue.config.js 配置基础路径 在和src同级的路径下创建一个文件名,vue.config.js(这文件名是固定这么写的) 在文件中写入 module.exports = {     baseUrl:'/',//根路径     outputDir:'dist',//打包的时候生成的一个文件名     assetsDir:'assets',//静态资源目录(js,css,

随机推荐