I found a lot of information about how to publish it to the server, but I still couldn't find a suitable document that could be actually operated. Many documents are titled online and are actually just running locally. In fact, the release of the vue2.0 project is quite simple.
Article focus:
- Explain the significance of the vue project configuration part
- How to package as a front-end project in a production environment
- How to package and publish to the cloud and nginx server configuration
1. The significance of the vue project configuration part
First, let’s take a look at the overall project directory structure of vue2.0 (not importantly omitted)
- vueDemo //Your vue project name - build
-
-
-
-
-
- //This is the webpack configuration package file corresponding to our development environment - //This is a webpack configuration package file corresponding to our production environment - config
- //Define Node development environment configuration - //Packaging dist directory structure configuration - //Define Node production environment - node_modules
- src
- static
- ...
-
Below I will intercept some of the code in the file for explanation:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/",
"start": "npm run dev",
"build": "node build/"
},
I believe that those who have read the official website know that when we start our vue project, we use npm run dev. The essence of execution here is actually to use webpack to package it, and the configuration file used is in the bulid directory I mentioned above. That is the execution result of our development environment.
2. How to package as a front-end project in a production environment
After seeing this, you probably think about what commands do I need to execute in the production environment?
Next I will reveal the answers one by one. In fact, the answer is the script script in me build / Execute the command npm run build
The following is the main content, all of which are generated by the vue project itself
'use strict'
require('./check-versions')()
.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('./')
const spinner = ora('building for production...')
()
rm((, ), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
()
if (err) throw err
(({
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 (()) {
((' Build failed with errors.\n'))
(1)
}
((' Build complete.\n'))
((
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening over file:// won\'t work.\n'
))
})
})
From the above we can see that what he actually uses is the document I just explained.
3. Package and publish to the cloud and nginx server configuration
By executing this script file, we can get the dist package file we need. I am using the nginx server deployed on Alibaba Cloud. Just configure the information, restart the nginx server and you can access it through your browser.
Configuration code
server
{
listen 80;
server_name Website name;
root yourdistFile directory;
index ;
if ($request_uri = '/?route=account/reg/code') {
return 404;
}
error_log logs/;
access_log logs/;
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.