build
config
src
  --assets
  --components
     --Button
        index.vue
  --layout
    --components
       --Header
          index.vue
    index.vue
  --view
     --login
        index.vue
     --user
         --components
     index.vue
  App.vue
  main.js

components文件里的組件首字母大寫
view頁面頁面文件字母小寫
layout主頁面布局結(jié)構(gòu)

使用過程遇到的問題處理參考

一.打包后刪除頁面的console.log

在build文件中的webpack.prod.conf.js中的添加 pure_funcs:['console.log']

image.png

二.配置favicon

• 開發(fā)環(huán)境
  編輯webpack.dev.conf.js文件

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon:'src/assets/images/favicon.ico',  //添加此行配置favicon的地址
      inject: true
    }),

• 打包環(huán)境
  編輯webpack.prod.conf.js文件

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      favicon:'src/assets/images/favicon.ico', //添加此行配置favicon的地址
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

三.不同的開發(fā)生產(chǎn)測試環(huán)境打包或者運行配置不同的接口IP地址

例如打包正式站，測試站，本地
（1） 安裝cross-env

npm install cross-env --save-dev

（2）config文件下修改或添加文件

• 修改dev.env.js文件(用于運行項目的配置)

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"dev"',
  BASE_API:'"我是開發(fā)環(huán)境，我不在這設置API地址"' //本地運行接口API根路徑不需要設置此處，每次換地址需要重啟不方便
})

• 修改prod.env.js文件如下

'use strict'
module.exports = {//生產(chǎn)環(huán)境---正式站
  NODE_ENV: '"prod"',
  BASE_API:'"http://"', //正式站地址
  DIST_NAME:'prod',//打包文件夾名稱
}

• 添加test.env.js文件如下

'use strict'
module.exports = {//生產(chǎn)環(huán)境---測試站
  NODE_ENV: '"test"',
  BASE_API:'"http://"', //測試站地址
  DIST_NAME:'test',//打包文件夾名稱
}

• 添加local.env.jse文件如下

'use strict'
module.exports = {//生產(chǎn)環(huán)境--后臺人員的本地
  NODE_ENV: '"local"',
  BASE_API:'"http://"',//后臺人員本地地址
  DIST_NAME:'local',//打包文件夾名稱
}

• 編輯index.js文件（設置不同環(huán)境下的打包文件夾，例如分別是dist/prod,dist/test,dist/local）

//添加此段
var env = require(path.resolve(__dirname,'./'+ process.env.NODE_ENV +'.env'));

 build: {
    index: path.resolve(__dirname, '../dist/'+ env.DIST_NAME +'/index.html'), //修改此處
    assetsRoot: path.resolve(__dirname, '../dist/'+ env.DIST_NAME),//修改此處
    assetsSubDirectory: 'static',
    assetsPublicPath: env.DIST_NAME,//修改此處

（3）編輯build文件下文件

• 編輯build.js文件

process.env.NODE_ENV = 'production' //刪除文件中的此行代碼

• 編輯webpack.prod.conf.js文件

//添加此段
let env=null
if(process.env.NODE_ENV==='prod'){
  env = require('../config/prod.env')
}else if(process.env.NODE_ENV==='test'){
  env = require('../config/test.env')
}else if(process.env.NODE_ENV==='local'){
  env = require('../config/local.env')
}

plugins: [
    new webpack.DefinePlugin({
      'process.env': env //修改此處
    }),

（4）package.json中添加三行

"scripts": {
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", // 添加cross-env NODE_ENV=dev
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:local":"cross-env NODE_ENV=local node build/build.js", //打包本地
    "build:test":"cross-env NODE_ENV=test node build/build.js", //打包測試站
    "build:prod":"cross-env NODE_ENV=prod node build/build.js" //打包正式站
  },

（5）設置接口API的根路徑
在src文件夾下新建一個api.config.js文件，內(nèi)容如下

export const BASE_URL=(()=>{
    let BASE_API=null
    if(process.env.NODE_ENV==='dev'){//運行時隨意切換API地址
        BASE_API='http://'  // 后臺本地
      // BASE_API='http://'   // 測試站
      //  BASE_API='http://' // 正式站
    }else{ // 打包的相應API地址
        BASE_API=process.env.BASE_API
    }
    return BASE_API
})()

頁面調(diào)用api接口只需要

import { BASE_URL } from "@/api.config.js";
axios.post(`${BASE_URL}/xxx`,data).then((res)=>{

項目打包命令分別是
npm run build:local
npm run build:test
npm run build:prod