vuecli3.0下面的安装css。我先第三个 store 的文件整理。添加 service与 less文件。 3.

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: {     // ...    },      }