Vue Cli3 创建项目的方法步骤

npm install -g @vue/cli

vue create iview-admin# ORvue ui

$ npm run serve

module.exports = { /** 区分打包环境与开发环境  * process.env.NODE_ENV==='production' (打包环境)  * process.env.NODE_ENV==='development' (开发环境)  * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',  */ // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // 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 chainWebpack: () => {}, configureWebpack: () => {}, //如果想要引入babel-polyfill可以这样写 // configureWebpack: (config) => { //  config.entry = ["babel-polyfill", "./src/main.js"] // }, // vue-loader 配置项 // https://vue-loader.vuejs.org/en/options.html // vueLoader: {}, // 生产环境是否生成 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, // 是否启用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',  // 自动打开浏览器  open: true,  host: '0.0.0.0',  port: 8080,  https: false,  hotOnly: false,  // 处理跨域问题  proxy: {}, // 设置代理  before: app => {} }, // 第三方插件配置 pluginOptions: {  // ... }}

# stringmodule.exports = { devServer: { proxy: '<url>' }} # Objectmodule.exports = { devServer: { proxy: {  '/api': {  target: '<url>',  ws: true,  changeOrigin: true  },  '/foo': {  target: '<other_url>'  } } }}

module.exports = { dll: true}module.exports = { dll: [ 'dep-a', 'dep-b/some/nested/file.js' ]}

# 在 public/index.html中引用静态资源<%= webpackConfig.output.publicPath %><link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico" rel="external nofollow"  ># vue templates中，需要在data中定义baseUrl<template> <img :src="`${baseUrl}my-image.png`"></template><script> data () { return {  baseUrl: process.env.BASE_URL } }</script>

// vue.config.jsmodule.exports = { chainWebpack: config => { config.module  .rule('js')  .include   .add(/some-module-to-transpile/) // 要处理的模块 }}

// vue.config.jsmodule.exports = { chainWebpack: config => { config.module  .rule('scss')  .use('sass-loader')  .tap(options =>  merge(options, {   includePaths: [path.resolve(__dirname, 'node_modules')],  })  ) }}

// vue.config.jsmodule.exports = { chainWebpack: config => { config  .plugin('html')  .tap(args => {  return [/* new args to pass to html-webpack-plugin's constructor */]  }) }}

chainWebpack: config => { if (process.env.NODE_ENV === 'production') {  config   .plugin('uglify')   .tap(([options]) =>{    // 去除 console.log    return [Object.assign(options, {     uglifyOptions: { compress: {      drop_console : true,      pure_funcs: ['console.log']     }}    })]   }) }}

.env    # 在所有环节中执行.env.local   # 在所有环境中执行，git会ignored.env.[mode]   # 只在特定环境执行( [mode] 可以是 "development", "production" or "test" ).env.[mode].local # 在特定环境执行, git会ignored.env.development # 只在生产环境执行.env.production  # 只在开发环境执行

# 键名须以VUE_APP开头VUE_APP_SECRET=secret

console.log(process.env.VUE_APP_SECRET)