Vue3 development environment and production environment packaging configuration

Vue3 packaging environment configuration

Usually the request addresses used in the development environment and the formal environment are different at work. Most of the methods are to manually change the request address, but the chance of manual changes will cause errors will be greater, so vue-cli3 provides 'environment variables and patterns ' ( pattern and environment variables | Vue CLI ), through this method we can change the address of the request through commands, thereby reducing the chance of errors caused by manual changes.

Note: There is an English period (.) before and after env in the name of the created file. Here, for the convenience of testing, the request address is consoled out for easy observation. Pass

process.env.VUE_APP_BASE_API can get related variable content

1. Local development request address configuration method

development Create a .env. file in the project root directory (the same directory as the package.json file)

Content VUE_APP_BASE_API = 'Test environment packaging request address'

At this time, run (npm run serve) and output process.env.VUE_APP_BASE_API content is 'test environment packaging request address'

Note: Because the change of external files will not trigger the hot update of vue-cli, every change to the file here needs to be re-run once

2. The method of configuring the local test packaging request address is the same as the first step, but a file with a different name is created.

Create a file: .env.test

Content: VUE_APP_BASE_API = 'Test environment packaging request address'

Configure the package.json file Add the command "test": "vue-cli-service build --mode test",

Note: "test": "vue-cli-service build --mode test" The last 'test' name of this command is not fixed as long as it is the same as the created file name' .env. '

The following name corresponds to

Run the packaging command to see the effect (because it is packaged in the test environment, the packaging command to run is npm run test)

ok perfect error hahaha

Note here that the index.html file packaged by vue-cli cannot be opened directly. The vue.config.js file needs to be configured. Because of the simplified structure of the vue-cli3 file, this file needs to be created by itself.

content:

module.exports = {

publicPath: process.env.NODE_ENV === 'production' ? './' : '',

productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,

outputDir: process.env.outputDir,

};
View the effect

works perfectly

Now there is only the configuration of the final official environment packaging

3. Create a .env. production file Content: VUE_APP_BASE_API = 'Online official environment packaging request address'

Run the npm run build command directly to package

The first and third steps do not need to configure the package.json file because these two commands are already built in cli3 and do not need to be configured

Inadequacies, I hope you can give me a lot of advice

# Welcome to the Markdown editor

Hello! This is the welcome page displayed for the first time you use the Markdown editor . If you want to learn how to use the Markdown editor, you can read this article carefully to understand the basic syntax of Markdown.

new changes

We have made some functional extensions and syntax support for the Markdown editor. In addition to the standard Markdown editor functions, we have added the following new features to help you write blogs with it:

The new interface design will bring a new writing experience;
Set your favorite code highlighting style in the authoring center, and Markdown will display the selected highlighting style in the code snippet ;
Added image drag and drop function, you can directly drag and drop local images to the editing area for direct display;
Brand new KaTeX math formula syntax;
Added the mermaid syntax ¹ function that supports Gantt charts ;
Added the function of editing Markdown articles on multiple screens;
Added functions such as focus writing mode, preview mode, concise writing mode, and left and right area synchronization wheel settings. The function button is located in the middle of the editing area and the preview area;
Added checklist functionality.

Function shortcut key

Ctrl/Command+ Undo: + Z
Redo: Ctrl/Command+ Y
Bold: Ctrl/Command+ B
Italic: Ctrl/Command+ I
Title: Ctrl/Command+ Shift+ H
Unordered List: Ctrl/Command+ Shift+ U
Ordered List: Ctrl/Command+ Shift+ O
Check List: + +Insert Code: + + Ctrl/CommandInsert Link : + + Insert Image: + + Find: + Replace: +ShiftC
Ctrl/CommandShiftK
Ctrl/CommandShiftL
Ctrl/CommandShiftG
Ctrl/CommandF
Ctrl/CommandG

Reasonable creation of the title is helpful for the generation of the catalog

Enter 1 time directly #and press it space, and a level 1 title will be generated.
After entering 2 times #and pressing it space, a 2-level title will be generated.
By analogy, we support 6 levels of headings. TOCHelps to generate a perfect table of contents after using syntax.

How to change the style of text

emphasized text emphasized text

bold text bold text

markup text

~~delete text~~

quoted text

H2O is a liquid _.

2 ¹⁰ operation result is 1024.

Insert links and images

link: link .

picture: Alt

Picture with dimensions:

Centered image: Alt

Centered and sized images:

Of course, in order to make it more convenient for users, we have added the function of dragging and dropping pictures.

How to insert a nice piece of code

Go to the blog settings page, choose a code snippet highlighting style you like, and the same highlighting is shown below 代码片.

// An highlighted block
var foo = 'bar';

Generate a list that works for you

project
- project
  - project

item 1
item 2
item 3

Scheduled Tasks
mission accomplished

create a form

A simple table is created like this:

project	Value
computer	$1600
cell phone	$12
catheter	$1

Set the content to be centered, left, and right

Use :---------:Center
Use :----------Left
Use ----------:Right

first row	The second column	third column
Center the first column of text	The second column of text is right-aligned	Third column text left

SmartyPants

SmartyPants converts ASCII punctuation characters into "smart" typographical punctuation HTML entities. For example:

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

create a custom list

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

How to create a footnote

A text with footnotes. ²

Annotations are also essential

Markdown converts text to HTML .

KaTeX math formula

You can render LaTeX math expressions using KaTeX :

Gamma infrastructure $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is the integral by Euler

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

You can find more information about LaTeX mathematical expressions here .

New Gantt chart feature to enrich your articles

For Gantt chart syntax, refer to here ,

UML diagrams

Can be rendered using UML diagrams. Mermaid . For example, a sequence diagram generated below:

This will generate a flowchart. :

For Mermaid syntax, refer here ,

FLowchart flow chart

We will still support the flowchart of flowchart:

For Flowchart flowchart syntax, refer to here .

Export and Import

export

If you want to try using this editor, you can edit this article freely. When you have finished writing an article, find Article to generate a .md file or .html file for local storage.

import

If you want to load an .md file you have written, you can select the import function on the upper toolbar to import the file with the corresponding extension and
continue your creation.

mermaid syntax description ↩︎
Explanation of footnotes↩︎