Vue-cli3 + webpack搭建vue项目流程以及打包发布流程_vue-cli webpack部署打包自动执行访问到了webpack目录下public

目录

1.命令行初始化项目

2. 分析项目目录

3. vue.config.js多环境打包配置

4. 发布项目

5. 参考文章

---

1.命令行初始化项目

bogon:vue xudanfeng$ vue create vue-cli-project
 
 
Vue CLI v3.0.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors
? 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): Sass/SCSS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? No
.....构建初始化项目阶段
 
//构建完成项目
Successfully created project vue-cli-project.
?  Get started with the following commands:
 
 $ cd vue-cli-project
 $ yarn serve

2. 分析项目目录

  

-->public目录下index.html：设置项目的一些meta头信息和提供<div id="app"></div>用于挂载 vue 节点。

-->node_modules目录：存放项目中下载好的依赖工具包。

-->package.json文件：

     存放项目名称，版本号，dependencies和devDependencies声明了需要引用的依赖包，启动、打包项目的命令管理等。

-->src目录：我们开发的页面和资源可以放在这里。

    src下main.js：vue-cli工程的入口文件。

    src下app.vue：使用标签<route-view></router-view>渲染整个工程的.vue组件

注意：相比较vue-cli2项目config目录，build目录没有了，需要手动配置 webpack：在根目录下新建一个 vue.config.js 文件。

3. vue.config.js多环境打包配置

const path = require('path');
 
const envStr = process.env.env_config
const debugUrl = (envStr === 'prod') ? 'https://mobile-app.yizuodao.com' : 'https://test-/mobile-app.yizuodao.com'
 
module.exports = {
    // 基本路径
    baseUrl: './',
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production';
        } else {
            // 为开发环境修改配置...
            config.mode = 'development';
        }
 
        Object.assign(config, {
            // 开发生产共同配置
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components')
                }
            }
        });
    },
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: { //设置代理
            '/*.json': {
                target: debugUrl
            },
            '/*.do': {
                target: debugUrl
            },
            '/*.m': {
                target: debugUrl
            },
        },
        before: (app) => {
            console.log(app)
        }
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};

4. 发布项目

方案1：

第一步：开发人员将开发完项目上传gitLab上，

第二步：构建服务器拉去gitLab上正式环境分支，进行下载依赖，构建，压缩，构建后的发布包会被传到中转站服务器：文件管理服务器集群。

第三步：运行服务器（可能是多台）会从文件服务器中拉去对应版本的相同压缩包，并解压运行。

参考地址：https://www.jb51.net/article/131307.htm

方案2：

自动部署平台jenkins，其内部原理同方案1。可以手动部署，也可以自动部署。根据gitLab提交或合并请求。

5. 参考文章