vuecli3.0

343 阅读2分钟

1.安装步骤


rourer 

vuex

css pre

babel

pwa:

linter: 

unit testing: 单元测试

E2E testing,, 代码测式


以下图是:是否默认为history路由, 先 n


下面的安装css。 我先第三个


 以下是 配置单独放在一个文件夹,还是放在package.json中, 我先第一个


下面是, 是否 保存 本次的设置,我选的 n


 然后回车,就可以进行安装了,


2.目录分析


改造后:

 store 的文件整理。

添加 service与 less文件。


3.  修改vue.config.js

如果想修改vue-cli3的webapck配置,需要手动,添加一个vue.config.js的文件。

其中。 配置  暴露全局 变量。 serverDomain ,是区分 线上环境还是预发环境

{
  "scripts": {
    "dev_yf": "vue-cli-service serve", // mode默认为development 
    "dev": "vue-cli-service serve --mode production", 
  },
}

chainWebpack: (config) => {      
// 暴露 servrDomain 为全局变量      
 config            .plugin('define')                
.tap(args => {                   
   if (process.env.NODE_ENV === 'production') {                    
     args[0]['serverDomain'] = JSON.stringify("api.baidu.com");                  
   } else {                    
      args[0]['serverDomain'] = JSON.stringify("beta-api.baidu.com");                 
   }               
     return args          
 })          
},


还有一个方式来区别 运行的哪种环境, 可以自己定义process.env 的参数

插件 cross-env  

4 、关于热更新的问题

vue-cli,修改样式不能热更新。

查一些资料

第一步

const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV)

第二步

   chainWebpack: (config) => {     
    // 暴露 servrDomain 为全局变量      
    config.resolve.symlinks(true) ,// 修复热更新失效
}

第三步:

css的配置,

extract不要写成true

  extract: IS_PROD,

5.完整的vue.config.js

const path = require('path');const debug = process.env.NODE_ENV == 'development';const webpack = require('webpack')console.log(  process.env.ISDEV +"==")console.log(process.env.NODE_ENV);const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV)module.exports = {       // 基本路径    baseUrl: '/',    // 输出文件目录    outputDir: 'dist',    assetsDir: './', // 静态资源目录 (js, css, img, fonts)    // eslint-loader 是否在保存的时候检查    lintOnSave: false,    // use the full build with in-browser compiler?    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only    // compiler: false,       // webpack配置    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md   webpack链接API,用于生成和修改webapck配置    chainWebpack: (config) => {      // 暴露 servrDomain 为全局变量       config.resolve.symlinks(true) ,// 修复热更新失效      config            .plugin('define')                .tap(args => {                   if (process.env.NODE_ENV === 'production') {                    args[0]['serverDomain'] = JSON.stringify("api.baidu.com");                  } else {                    args[0]['serverDomain'] = JSON.stringify("beta-api.baidu.com");                  }                return args            })           },    configureWebpack: (config) => {// webpack配置,值位对象时会合并配置,为方法时会改写配置        if (debug) { // 开发环境配置         config.devtool = 'cheap-module-eval-source-map'       } else { // 生产环境配置        config.devtool = 'cheap-module-eval-source-map'       }       Object.assign(config, { // 开发生产共同配置         resolve: {           alias: {             '@': path.resolve(__dirname, './src')//设置路径别名             //...           }         }       })    },    // vue-loader 配置项    // https://vue-loader.vuejs.org/en/options.html    // vueLoader: {},        // 生产环境是否生成 sourceMap 文件    productionSourceMap: false,    // css相关配置 配置高于chainWebpack中关于css loader的配置    css: {     // 是否使用css分离插件 ExtractTextPlugin     extract: IS_PROD,     // 开启 CSS source maps?是否在构建样式地图,false将提高构建速度     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 构建时开启多进程处理babel编译    parallel: require('os').cpus().length > 1,    // 是否启用dll    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode    // dll: false,       // 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: null, // 设置代理     before: app => {}    },    // 第三方插件配置    pluginOptions: {     // ...    },      }