Shulou(Shulou.com)06/03 Report--

This article mainly explains the "vue2.0 project release online operation steps", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn the "vue2.0 project release online operation steps" bar!

I. the significance of the configuration part of the vue project

First of all, let's take a look at the overall project directory structure of vue2.0 (non-key omission).

-vueDemo / / your vue project name-build-build.js-check-version.js-utils.js-vue-loader.conf.js-webpack.base.conf.js-webpack.dev.conf.js / / this is for the webpack configuration package file corresponding to our development environment-webpack.prod.conf.js / / this is for the webpack configuration corresponding to our production environment. Package file-config-dev.env.js / / define Node development environment configuration-index.js / / package dist directory structure configuration-prod.env.js / / define Node production environment-node_modules-src-static -...-package.json

Below, I will intercept some of the code in the package.json file for explanation:

"scripts": {"dev": "webpack-dev-server-inline-progress-config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js"}

I believe anyone who has seen the official website knows that we all use npm run dev to start our vue project. The essence of the implementation here is to package it with webpack. The configuration file used is the webpack.dev.conf.js under the bulid directory I mentioned above. This is the result of the execution of our development environment.

How to package it into a front-end project in the production environment

When you see this, you probably think, what orders do I need to execute in the production environment I need?

Next, I will reveal the answers one by one. In fact, the answer is that the script script build / bulid.js in my package.js executes the command npm run build.

The following are the main contents of build.js, which are all generated by the vue project itself.

'use strict'require ('. / check-versions') () process.env.NODE_ENV = 'production'const ora = require (' ora') const rm = require ('rimraf') const path = require (' path') const chalk = require ('chalk') const webpack = require (' webpack') const config = require ('.. / config') const webpackConfig = require ('. / webpack.prod.conf') const spinner = ora ('building for production...') spinner.start () rm (path.join (config.build.assetsRoot) Config.build.assetsSubDirectory), err = > {if (err) throw err webpack (webpackConfig, (err, stats) = > {spinner.stop () if (err) throw err process.stdout.write (stats.toString ({colors: true, modules: false, children: false, / / If you are using ts-loader, setting this to true will make TypeScript errors show up during build. Chunks: false ChunkModules: false}) +'\ n\ n') if (stats.hasErrors ()) {console.log (chalk.red ('Build failed with errors.\ n') process.exit (1)} console.log (chalk.cyan (' Build complete.\ n') console.log (chalk.yellow ('Tip: built files are meant to be served over an HTTP server.\ n' + 'Opening index.html over file:// won\ t work.\ n')})})

From the above we can see that his practical is the webpack.prod.conf.js file I just explained.

Third, package and release to the cloud and nginx server configuration

By executing this script file, we can get the dist package file we need. I use the nginx server deployed in Aliyun. You only need to configure the information, restart the nginx server and you can access it through your browser.

Configuration code

Server {listen 80; server_name URL name; root files in your dist file directory; index index.html; if ($request_uri ='/ index.php?route=account/reg/code') {return 404;} error_log logs/error.log; access_log logs/access.log } Thank you for your reading. The above is the content of "Operation steps for vue2.0 Project release and launch". After the study of this article, I believe you have a deeper understanding of the operation steps of vue2.0 project release and launch, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.