This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

preface

Today, I found that many partners with one or two years of work experience still can’t pack VUE, and do not know the order of packing! Let alone deploy to the server and place it in the nginx directory

First, the difference between vUE running commands

What is the difference between NPM Run Dev and NPM run serve?

1. NPM run dev

2, NPM run serve

The first NPM run dev key is “dev”, the second is “serve”, so we run different commands, but why are the commands different? This has to do with vue scaffolding, resulting in a different configuration here.

3. Scaffolding

(1) Vue This is what we often call an incremental framework, but this is a complete framework.

(2) Vue Cli This is a command line tool for rapid engineering based on Vue, which is composed of the whole Vue core

With this distinction, there are two ways to run commands.

Two, VUE packaging

1. Static files are packed and placed on the server

This is a very common problem, basically every development of a project to configure once, there will be problems.

Vue project: configure in config/index.js:

AssetsPublicPath: ‘./ ‘

assetsRoot: path.resolve(__dirname, '.. /dist'), assetsSubDirectory: 'static', assetsPublicPath: './',Copy the code

Vue CLI project: Configure in vue.config.js:

Module. exports = {publicPath: './', outputDir: "dist", // assetsDir: 'static', // set js/CSS static resource secondary directory location};Copy the code

This is mainly to configure publicPath: ‘./ ‘

2, after packaging, only the background image, no page content, the console does not report errors

I don’t know if you have encountered this, this is very simple, because the routing mode is configured to be history, remove this or change to hash!

If you must use history, there is a solution: add base to mode :’/demo/’ (this demo is the project name)

router/index.js
const router = new Router({    mode: "history",    base: "demo",    routes: [        {           path: "/",           name: "index",           component: index,        }    ],});

vue.config.js
module.exports = {
    publicPath: '/demo/',
    outputDir: 'dist',}
Copy the code

Nginx (demo is also project name) :

location /demo {
	index  index.html index.htm;
	try_files $uri $uri/ /demo /;
}
Copy the code

Write so much first, today I am a little busy, write not very specific later have time to perfect, I am off work ~