Kompilacja Vue.js z różnymi zmiennymi środowiskowymi

Question

Użyłem official Webpack template dla Vue.js. Używa oddzielnej konfiguracji dla różnych environments. Oferują test, rozwój i produkcję. Potrzebuję jeszcze jednego, ponieważ mamy dwa serwery produkcyjne (jedną produkcję i jedną inscenizację).

Jaką dobrą praktykę mają różne konfiguracje dla różnych środowisk produkcyjnych? Pomyślę o czymś takim jak npm run build --URL:http://some-url.com --PORT:80 ....

Wszelkie porady są mile widziane!

Answer 1

To bardziej przypomina pytanie związane z pakietem internetowym, a nie Vue.js, Chcę udostępnić poprzednią konfigurację do obsługi różnych plików i środowisk kompilacji. po pierwsze, utrzymujemy naszą konfigurację w oddzielnym folderze.

config/index.js

// see http://vuejs-templates.github.io/webpack for documentation. 
var path = require('path') 

const CDN = 'https://cdnURL.com/' 

module.exports = { 
    build: { 
    env: require('./prod.env'), 
    assetsRoot: path.resolve(__dirname, '../dist'), 
    assetsSubDirectory: 'static', 
    assetsPublicPath: CDN, 
    productionSourceMap: true, 
    // Gzip off by default as many popular static hosts such as 
    // Surge or Netlify already gzip all static assets for you. 
    // Before setting to `true`, make sure to: 
    // npm install --save-dev compression-webpack-plugin 
    productionGzip: false, 
    productionGzipExtensions: ['js', 'css'], 
    productionBundleAnalyze: process.env.ANALYZE ? true : false 
    }, 
    dev: { 
    env: require('./dev.env'), 
    port: 8080, 
    assetsSubDirectory: 'static', 
    assetsPublicPath: '/', 
    proxyTable: { 
     '/api': { 
     target: process.env.npm_package_config_proxy, 
     logLevel: 'debug', 
     changeOrigin: true, 
     onProxyRes(proxyRes, req, res) { 
      // http-proxy-middleware 
      proxyRes.headers['Content-Type'] = proxyRes.headers['content-type'] 
      delete proxyRes.headers['content-type'] 
     } 
     } 
    }, 
    // CSS Sourcemaps off by default because relative paths are "buggy" 
    // with this option, according to the CSS-Loader README 
    // (https://github.com/webpack/css-loader#sourcemaps) 
    // In our experience, they generally work as expected, 
    // just be aware of this issue when enabling this option. 
    cssSourceMap: false 
    }, 
    projects: { 
    main: { 
     entry: './packages/home/index.js', 
     devPath: 'main.html', 
     target: 'web', 
     buildPath: path.resolve(__dirname, '../dist/index.html'), 
     testPath: '../packages/home/__test__/index.js' 
    }, 
    desktop: { 
     entry: './packages/desktop/index.js', 
     devPath: 'desktop.html', 
     target: 'electron-renderer', 
     buildPath: path.resolve(__dirname, '../../static/desktop.html'), 
     assetsRoot: path.resolve(__dirname, '../../'), 
     assetsSubDirectory: 'static', 
     assetsPublicPath: '../', 
     testPath: '../packages/desktop/__test__/index.js' 
    }, 
    login: { 
     entry: './packages/login/index.js', 
     devPath: 'login.html', 
     target: 'web', 
     buildPath: path.resolve(__dirname, '../dist/login.html'), 
     testPath: '../packages/login/__test__/index.js' 
    }, 
    setting: { 
     entry: './packages/setting/index.js', 
     devPath: 'setting.html', 
     target: 'web', 
     buildPath: path.resolve(__dirname, '../dist/setting.html'), 
     testPath: '../packages/setting/__test__/index.js' 
    }, 
    playground: { 
     entry: './packages/playground/index.js', 
     target: 'web' 
    } 
    } 
} 

config/dev.env.js

var merge = require('webpack-merge') 
var prodEnv = require('./prod.env') 

module.exports = merge(prodEnv, { 
    NODE_ENV: '"development"', 
    API_ROOT: '"/api"' 
}) 

config/prod.env

module.exports = { 
    NODE_ENV: '"production"', 
    API_ROOT: '"http://test.example.co/api"' //staging server 
    // API_ROOT: '"http://127.0.0.1:8787/api"' //mock-up server 
} 

okrywać gdzie chcemy pracę zmieniamy Główny katalog interfejsu API tutaj.

i nasz plik webpack.base.conf.js wygląda następująco. build/webpack.base.conf.js

var path = require('path') 
var config = require('../config') 
var utils = require('./utils') 
var projectRoot = path.resolve(__dirname, '../') 

const isProduction = process.env.NODE_ENV === 'production' 

module.exports = { 
    entry: utils.entrys(), 
    output: { 
    path: config.build.assetsRoot, 
    publicPath: isProduction ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 
    filename: '[name].js' 
    }, 
    resolve: { 
    extensions: ['.js', '.vue', '.json'], 
    alias: { 
     'src': path.resolve(__dirname, '../src'), 
     'assets': path.resolve(__dirname, '../src/assets'), 
     'components': path.resolve(__dirname, '../src/components') 
    }, 
    unsafeCache: true 
    }, 
    target: config.projects[process.env.npm_package_config_dev].target, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      postcss: [ 
      require('postcss-cssnext')(), 
      require('lost')() 
      ], 
      cssModules: { 
      localIdentName: isProduction ? '[path][name]---[local]---[hash:base64:5]' : '[path][name]--[local]', 
      camelCase: true 
      }, 
      loaders: Object.assign({}, utils.cssLoaders()), 
      preLoaders: { 
      html: 'inline-svg-loader' 
      } 
     } 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     include: projectRoot, 
     exclude: /node_modules/, 
     query: { 
      cacheDirectory: true 
     } 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json-loader' 
     }, 
     { 
     test: /\.html$/, 
     loader: 'vue-html-loader' 
     }, 
     { 
     test: /\.(png|jpe?g|gif)(\?.*)?$/, 
     loader: 'url-loader', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('img/[name].[hash:7].[ext]') 
     } 
     }, 
     { 
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
     loader: 'url-loader', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 
     } 
     } 
    ] 
    } 
} 

i wreszcie nasz package.json to wyglądać tak

... 
... 
... 
    "scripts": { 
     "dev": "webpack-dashboard -- node build/dev-server.js", 
     "dev:login": "npm config set mesh:dev login && npm run dev", 
     "dev:setting": "npm config set mesh:dev setting && npm run dev", 
     "dev:main": "npm config set mesh:dev main && npm run dev", 
     "dev:desktop": "npm config set mesh:dev desktop && node build/dev-server.js", 
     "dev:playground": " npm config set mesh:dev playground && cross-env PORT=9000 npm run dev" 
    } 
... 
... 
... 

używaliśmy tej konfiguracji dla wiązki naszej aplikacji dla elektronu, internecie, a jednocześnie WebKit przy użyciu współdzielonych komponentów.

, ale jeszcze później mieliśmy problem ze skalpowaniem. i zaczęliśmy używać lerna, jeśli potrzebujesz czegoś więcej modulera. Polecam ci to sprawdzić.

Pozdrawiamy.

Answer 2

Istnieje prosty sposób. W config/prod.env.js dołączyć zmienne tak:

module.exports = { 
    NODE_ENV: '"production"', 
    MY_URL: JSON.stringify(process.env.MY_URL || 'http://example.com') 
} 

Następnie uruchomić build tak: MY_URL=http://example.org npm run build

zmienna będzie dostępna w main.js jak process.env.MY_URL