vue-cli3 项目从搭建优化到docker部署的方法

# 全局安装 vue-cli脚手架
npm install -g @vue/cli

vue create vue-cli3-project

// components/index.js
import Vue from 'vue'

// 自动加载 global 目录下的 .js 结尾的文件
const componentsContext = require.context('./global', true, /\.js$/)

componentsContext.keys().forEach(component => {
 const componentConfig = componentsContext(component)
 /**
 * 兼容 import export 和 require module.export 两种规范
 */
 const ctrl = componentConfig.default || componentConfig
 Vue.component(ctrl.name, ctrl)
})

npm install chalk --save-dev

// template.js
module.exports = {
 vueTemplate: compoenntName => {
 return `<template>
 <div class="${compoenntName}">
 ${compoenntName}组件
 </div>
</template>
<script>
export default {
 name: '${compoenntName}'
}
</script>
<style lang="scss" scoped>
.${compoenntName} {

}
</style>
`
 },
 entryTemplate: `import Main from './main.vue'
export default Main`
}

// generateComponent.js`
const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const resolve = (...file) => path.resolve(__dirname, ...file)
const log = message => console.log(chalk.green(`${message}`))
const successLog = message => console.log(chalk.blue(`${message}`))
const errorLog = error => console.log(chalk.red(`${error}`))
const { vueTemplate, entryTemplate } = require('./template')

const generateFile = (path, data) => {
 if (fs.existsSync(path)) {
 errorLog(`${path}文件已存在`)
 return
 }
 return new Promise((resolve, reject) => {
 fs.writeFile(path, data, 'utf8', err => {
 if (err) {
 errorLog(err.message)
 reject(err)
 } else {
 resolve(true)
 }
 })
 })
}
log('请输入要生成的组件名称、如需生成全局组件，请加 global/ 前缀')
let componentName = ''
process.stdin.on('data', async chunk => {
 const inputName = String(chunk).trim().toString()
 /**
 * 组件目录路径
 */
 const componentDirectory = resolve('../src/components', inputName)

 /**
 * vue组件路径
 */
 const componentVueName = resolve(componentDirectory, 'main.vue')
 /**
 * 入口文件路径
 */
 const entryComponentName = resolve(componentDirectory, 'index.js')
 
 const hasComponentDirectory = fs.existsSync(componentDirectory)
 if (hasComponentDirectory) {
 errorLog(`${inputName}组件目录已存在，请重新输入`)
 return
 } else {
 log(`正在生成 component 目录 ${componentDirectory}`)
 await dotExistDirectoryCreate(componentDirectory)
 // fs.mkdirSync(componentDirectory);
 }
 try {
 if (inputName.includes('/')) {
 const inputArr = inputName.split('/')
 componentName = inputArr[inputArr.length - 1]
 } else {
 componentName = inputName
 }
 log(`正在生成 vue 文件 ${componentVueName}`)
 await generateFile(componentVueName, vueTemplate(componentName))
 log(`正在生成 entry 文件 ${entryComponentName}`)
 await generateFile(entryComponentName, entryTemplate)
 successLog('生成成功')
 } catch (e) {
 errorLog(e.message)
 }

 process.stdin.emit('end')
})
process.stdin.on('end', () => {
 log('exit')
 process.exit()
})
function dotExistDirectoryCreate (directory) {
 return new Promise((resolve) => {
 mkdirs(directory, function () {
 resolve(true)
 })
 })
}

// 递归创建目录
function mkdirs (directory, callback) {
 var exists = fs.existsSync(directory)
 if (exists) {
 callback()
 } else {
 mkdirs(path.dirname(directory), function () {
 fs.mkdirSync(directory)
 callback()
 })
 }
}

"new:comp": "node ./scripts/generateComponent"

// generateView.js
const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const resolve = (...file) => path.resolve(__dirname, ...file)
const log = message => console.log(chalk.green(`${message}`))
const successLog = message => console.log(chalk.blue(`${message}`))
const errorLog = error => console.log(chalk.red(`${error}`))
const { vueTemplate } = require('./template')

const generateFile = (path, data) => {
 if (fs.existsSync(path)) {
 errorLog(`${path}文件已存在`)
 return
 }
 return new Promise((resolve, reject) => {
 fs.writeFile(path, data, 'utf8', err => {
 if (err) {
 errorLog(err.message)
 reject(err)
 } else {
 resolve(true)
 }
 })
 })
}
log('请输入要生成的页面组件名称、会生成在 views/目录下')
let componentName = ''
process.stdin.on('data', async chunk => {
 const inputName = String(chunk).trim().toString()
 /**
 * Vue页面组件路径
 */
 let componentVueName = resolve('../src/views', inputName)
 // 如果不是以 .vue 结尾的话，自动加上
 if (!componentVueName.endsWith('.vue')) {
 componentVueName += '.vue'
 }
 /**
 * vue组件目录路径
 */
 const componentDirectory = path.dirname(componentVueName)

 const hasComponentExists = fs.existsSync(componentVueName)
 if (hasComponentExists) {
 errorLog(`${inputName}页面组件已存在，请重新输入`)
 return
 } else {
 log(`正在生成 component 目录 ${componentDirectory}`)
 await dotExistDirectoryCreate(componentDirectory)
 }
 try {
 if (inputName.includes('/')) {
 const inputArr = inputName.split('/')
 componentName = inputArr[inputArr.length - 1]
 } else {
 componentName = inputName
 }
 log(`正在生成 vue 文件 ${componentVueName}`)
 await generateFile(componentVueName, vueTemplate(componentName))
 successLog('生成成功')
 } catch (e) {
 errorLog(e.message)
 }

 process.stdin.emit('end')
})
process.stdin.on('end', () => {
 log('exit')
 process.exit()
})
function dotExistDirectoryCreate (directory) {
 return new Promise((resolve) => {
 mkdirs(directory, function () {
 resolve(true)
 })
 })
}

// 递归创建目录
function mkdirs (directory, callback) {
 var exists = fs.existsSync(directory)
 if (exists) {
 callback()
 } else {
 mkdirs(path.dirname(directory), function () {
 fs.mkdirSync(directory)
 callback()
 })
 }
}

"new:view": "node ./scripts/generateView"

npm install axios --save
// or
yarn add axios

# // .env
NODE_ENV = "development"
BASE_URL = https://easy-mock.com/mock/5c4c50b9888ef15de01bec2c/api

// vue.config.js
module.exports = {
 chainWebpack: config => {
 // 这里是对环境的配置，不同环境对应不同的BASE_URL，以便axios的请求地址不同
 config.plugin('define').tap(args => {
 args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL)
 return args
 })
 }
}

// src/api/index.js
import axios from 'axios'
import router from '../router'
import { Message } from 'element-ui'
const service = axios.create({
 // 设置超时时间
 timeout: 60000,
 baseURL: process.env.BASE_URL
})
// post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置
// 即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8''
export default service

import axios from 'axios'
import router from '../router'
import { Message } from 'element-ui'
const service = axios.create({
 // 设置超时时间
 timeout: 60000,
 baseURL: process.env.BASE_URL
})

/**
 * 请求前拦截
 * 用于处理需要在请求前的操作
 */
service.interceptors.request.use(config => {
 const token = localStorage.getItem('token')
 if (token) {
 config.headers['Authorization'] = token
 }
 return config
}, (error) => {
 return Promise.reject(error)
})
/**
 * 请求响应拦截
 * 用于处理需要在请求返回后的操作
 */
service.interceptors.response.use(response => {
 const responseCode = response.status
 // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
 // 否则的话抛出错误
 if (responseCode === 200) {
 return Promise.resolve(response)
 } else {
 return Promise.reject(response)
 }
}, error => {
 // 服务器返回不是 2 开头的情况，会进入这个回调
 // 可以根据后端返回的状态码进行不同的操作
 const responseCode = error.response.status
 switch (responseCode) {
 // 401：未登录
 case 401:
 // 跳转登录页
 router.replace({
 path: '/login',
 query: {
 redirect: router.currentRoute.fullPath
 }
 })
 break
 // 403: token过期
 case 403:
 // 弹出错误信息
 Message({
 type: 'error',
 message: '登录信息过期，请重新登录'
 })
 // 清除token
 localStorage.removeItem('token')
 // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
 setTimeout(() => {
 router.replace({
 path: '/login',
 query: {
 redirect: router.currentRoute.fullPath
 }
 })
 }, 1000)
 break
 // 404请求不存在
 case 404:
 Message({
 message: '网络请求不存在',
 type: 'error'
 })
 break
 // 其他错误，直接抛出错误提示
 default:
 Message({
 message: error.response.data.message,
 type: 'error'
 })
 }
 return Promise.reject(error)
})

export default service

service.interceptors.response.use(response => {
 const responseCode = response.status
 // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
 // 否则的话抛出错误
 if (responseCode === 200) {
 return Promise.resolve(response.data)
 } else {
 return Promise.reject(response)
 }
}, error => {
 // 断网 或者 请求超时 状态
 if (!error.response) {
 // 请求超时状态
 if (error.message.includes('timeout')) {
 console.log('超时了')
 Message.error('请求超时，请检查网络是否连接正常')
 } else {
 // 可以展示断网组件
 console.log('断网了')
 Message.error('请求失败，请检查网络是否已连接')
 }
 return
 }
 // 省略其它代码 ······
 return Promise.reject(error)
})

// src/api/index.js
export const uploadFile = formData => {
 const res = service.request({
 method: 'post',
 url: '/upload',
 data: formData,
 headers: { 'Content-Type': 'multipart/form-data' }
 })
 return res
}

async uploadFile (e) {
 const file = document.getElementById('file').files[0]
 const formdata = new FormData()
 formdata.append('file', file)
 await uploadFile(formdata)
}

let loading = null
service.interceptors.request.use(config => {
 // 在请求先展示加载框
 loading = Loading.service({
 text: '正在加载中......'
 })
 // 省略其它代码 ······
 return config
}, (error) => {
 return Promise.reject(error)
})
service.interceptors.response.use(response => {
 // 请求响应后关闭加载框
 if (loading) {
 loading.close()
 }
 // 省略其它代码 ······
}, error => {
 // 请求响应后关闭加载框
 if (loading) {
 loading.close()
 }
 // 省略其它代码 ······ 
 return Promise.reject(error)
})

import Vue from 'vue'
import Vuex from 'vuex'
import { getNewsList } from '../api/news'
Vue.use(Vuex)
const types = {
 NEWS_LIST: 'NEWS_LIST'
}
export default new Vuex.Store({
 state: {
 [types.NEWS_LIST]: []
 },
 mutations: {
 [types.NEWS_LIST]: (state, res) => {
 state[types.NEWS_LIST] = res
 }
 },
 actions: {
 [types.NEWS_LIST]: async ({ commit }, params) => {
 const res = await getNewsList(params)
 return commit(types.NEWS_LIST, res)
 }
 },
 getters: {
 getNewsResponse (state) {
 return state[types.NEWS_LIST]
 }
 }
})

import { mapActions, mapGetters } from 'vuex'

computed: {
 ...mapGetters(['getNewsResponse'])
},
methods: {
 ...mapActions(['NEWS_LIST'])
}

import { mapActions, mapGetters } from 'vuex'
export default {
 computed: {
 ...mapGetters(['getNewsResponse'])
 },
 methods: {
 ...mapActions(['NEWS_LIST'])
 }
}

// news/index.vue
import Vue from 'vue'
import newsMixin from '@/mixins/news-mixin'
export default {
 name: 'news',
 mixins: [newsMixin],
 data () {
 return {}
 },
 async created () {
 await this.NEWS_LIST()
 console.log(this.getNewsResponse)
 }
}

npm install compression-webpack-plugin --save-dev
// or
yarn add compression-webpack-plugin --dev

// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
 chainWebpack: config => {
 // 这里是对环境的配置，不同环境对应不同的BASE_URL，以便axios的请求地址不同
 config.plugin('define').tap(args => {
 args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL)
 return args
 })
 if (process.env.NODE_ENV === 'production') {
 // #region 启用GZip压缩
 config
 .plugin('compression')
 .use(CompressionPlugin, {
 asset: '[path].gz[query]',
 algorithm: 'gzip',
 test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
 threshold: 10240,
 minRatio: 0.8,
 cache: true
 })
 .tap(args => { })

 // #endregion
 }
 }
}

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
 chainWebpack: config => {
 // 省略其它代码 ······
 // #region 忽略生成环境打包的文件

 var externals = {
 vue: 'Vue',
 axios: 'axios',
 'element-ui': 'ELEMENT',
 'vue-router': 'VueRouter',
 vuex: 'Vuex'
 }
 config.externals(externals)
 const cdn = {
 css: [
 // element-ui css
 '//unpkg.com/element-ui/lib/theme-chalk/index.css'
 ],
 js: [
 // vue
 '//cdn.staticfile.org/vue/2.5.22/vue.min.js',
 // vue-router
 '//cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js',
 // vuex
 '//cdn.staticfile.org/vuex/3.1.0/vuex.min.js',
 // axios
 '//cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js',
 // element-ui js
 '//unpkg.com/element-ui/lib/index.js'
 ]
 }
 config.plugin('html')
 .tap(args => {
 args[0].cdn = cdn
 return args
 })
 // #endregion
 }
 }
}

<!--public/index.html-->
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 <% if (process.env.NODE_ENV === 'production') { %>

 <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
 <link href="<%=css%>" rel="preload" as="style">
 <link rel="stylesheet" href="<%=css%>" as="style">
 <% } %>
 <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
 <link href="<%=js%>" rel="preload" as="script">
 <script src="/UploadFiles/2021-04-02/<%=js%>">

7.3 全站cdn
我们已经把第三方库使用 cdn 替代了，那么我们 build 后生成的 js , css 之类的文件能否也用 cdn 呢？

申请自己的cdn域名
要想把自己的资源上传到 cdn 上，前提是得有自己的 cdn 域名，如果没有的话，可以到七牛云官网上注册申请一个

  
注册七牛云账号
  
到七牛云对象存储模块中新建存储空间
  
输入存储空间信息


确定创建
创建成功后会跳转到这个存储空间的控制台页面

其中有个域名就是你的测试域名
我们可以在内容管理那上传我们的 js 、 css 之类的文件、不过我们的文件那么多，一个一个上传明显不合理。要你你也不干。
这时候，这些批量又重复的操作应该由我们的 node 出马，让我们来通过 node 来批量上传我们的资源文件
将生成的js、css资源上传到七牛cdn
在七牛云官网的文档中心有介绍如何通过 node 上传文件、感兴趣的人可以自己去研究一下。
查看 AccessKey 和 SecretKey ，在你的个人面板 -> 秘钥管理 ，这两个秘钥待会会用到

安装需要的插件


npm install qiniu glob mime --save-dev


在 scripts 目录下创建一个 upcdn.js 文件


// /scripts/upcdn.js
const qiniu = require('qiniu')
const glob = require('glob')
const mime = require('mime')
const path = require('path')

const isWindow = /^win/.test(process.platform)

let pre = path.resolve(__dirname, '../dist/') + (isWindow "htmlcode">

const IS_PROD = process.env.NODE_ENV === 'production'
const cdnDomian = 'http://ply4cszel.bkt.clouddn.com'
module.exports = {
 publicPath: IS_PROD "htmlcode">

"build": "vue-cli-service build --mode prod && node ./scripts/upcdn.js",


运行查看效果
npm run build

然后到你的 cdn
控制台的内容管理看看文件是否已经上传成功


8. docker部署
这边使用的是 centOS7 环境，不过使用的是不同的系统，可以参考一下其它系统的安装方法
8.1 安装docker 更新软件库


yum update -y


安装docker


yum install docker


启动docker服务


service docker start


安装docker-compose


// 安装epel源
yum install -y epel-release
// 安装docker-compose
yum install docker-compose


8.2 编写docker-compose.yaml


version: '2.1'
services:
 nginx:
 restart: always
 image: nginx
 volumes:
 #~ /var/local/nginx/nginx.conf为本机目录, /etc/nginx为容器目录
 - /var/local/nginx/nginx.conf:/etc/nginx/nginx.conf
 #~ /var/local/app/dist 为本机 build 后的dist目录, /usr/src/app为容器目录,
 - /var/local/app/dist:/usr/src/app
 ports:
 - 80:80
 privileged: true


8.3 编写 nginx.conf 配置


#user nobody;

worker_processes 2;

#工作模式及连接数上线
events {
 worker_connections 1024; #单个工作进程 处理进程的最大并发数
}

http {
 include mime.types;
 default_type application/octet-stream;
 #sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用，
 sendfile on;
 #tcp_nopush on;

 #keepalive_timeout 0;
 keepalive_timeout 65;

 # 开启GZIP
 gzip on;

 # # 监听 80 端口，转发请求到 3000 端口
 server {
 #监听端口
 listen 80;
 #编码格式
 charset utf-8;

 # 前端静态文件资源
 location / {
	 root /usr/src/app;
 index index.html index.htm;
 try_files $uri $uri/ @rewrites;
 }
 # 配置如果匹配不到资源，将url指向 index.html， 在 vue-router 的 history 模式下使用，就不会显示404
 location @rewrites {
 rewrite ^(.*)$ /index.html last;
 }
 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
 root html;
 }
 }
}


8.4 执行 docker-compose


docker-compose -d up



8.5 docker + jenkins 自动化部署
使用 docker + jenkins 能实现代码提交到github后自动部署环境、这个要讲起来内容太多，有兴趣的可以看我这一篇文章
从零搭建docker+jenkins+node.js自动化部署环境
扩展


使用pm2自动化部署node项目

通过vue-cli3构建一个SSR应用程序
项目地址 vue-cli3-project 欢迎 star
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
            上一篇：JS实现的点击按钮图片上下滚动效果示例

            下一篇：JavaScript 判断iPhone X Series机型的方法