# Build & Deploy

# Build

When projects are completed, you can build your application only run one command:

# build for production environment
npm run build:prod

# build for test environment
npm run build:sit

After the build package is successful, the dist folder will be generated in the root directory, which is to build a packaged file, usually static files such as ***.js, ***.css, index.html, etc. .

If you need a custom build, such as specifying the dist directory, you need to configure it through config.

# Environmental variables

All test or production environment variables are configured under the @/build/config directory.

They all inject into the global context via the webpack.DefinePlugin plug-ins.

new webpack.DefinePlugin({
  "process.env": require("../config/xxx.env")
});

You can simply get your configuration environment variables directly using your code such as:

// So you can get the base_url configured in @/build/config
const baseURL = process.env.BASE_API,

# Analyze the build file size

If your build file is large, you can optimize your code by building and analyzing the size distribution of dependent modules using the webpack-bundle-analyzer.

npm run build:prod --report

After running you can see the specific size distribution at http://127.0.0.1:8888

# Publish

For publishing, you only have to publish the resulting static file after build, which is usually the static file in the dist folder, to your cdn or static server. Note that the index.html usually will be an entry page for your backend service. You may need to change the page's import path after determining static for JS and css.

// changes configure depending on your own path
assetsPublicPath: "./";

# Router & Server

In nx-admin, the front-end routing uses vue-router, so you have two options:browserHistory and hashHistory.

Simply speaking, the difference between them is the deal with routing. hashHistory is processed by the path following #, front-end routing management through HTML 5 History, and browserHistory is similar to our usual page access path, and with not #, but must through the server's configuration.

This project uses hashHistory by default, so if you have#in your url and you want to get rid of it, you need to switch tobrowserHistory.

Modify src/router/index.js mode。

export default new Router({
  // mode: 'history' // Need backend support
});