Introduction to the construction, packaging and publishing process of vue project

This article mainly introduces the construction, packaging and publishing process of the vue project. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

Many friends are familiar with VUE If you are not familiar with a series of project processes, the editor has sorted out the entire process of building, packaging and releasing the Vue project based on the questions raised by netizens. I hope it will be useful to you.

1. Creation of vue project

1. First of all, Node.js and npm must be available. Not much to say

2. Install the scaffolding

You can browse directly at this time - but now there must be many novices who want to publish it to gitHub and browse it, using vue Family Bucket makes its own blog. Now let me talk about how to publish the vue project to github. I wrote about the vue environment setup before. You can refer to: vue environment setup

2. Packaging of the vue project

1. Everyone knows that npm run build is used for packaging. At this time, if you directly open index.html under dist/, you will find that the file can be opened, but all js, css, img and other paths point to the root. Directory,

At this time, you need to modify the assetsPublicPath field in config/index.js. The initial project is /, which points to the project root directory, which is why an error occurs. At this time, it is changed to ./

./Current directory../Parent directory/Root directory

Root directory: In the computer file system, the root directory refers to the top-level directory of the logical drive, which is a relative subdirectory. In terms of directory;

It is like the "root" of a big tree. All branches start from it, so it is named the root directory. Take the Windows operating system developed by Microsoft as an example:

Open My Computer (Computer), double-click the C drive to enter the root directory of the C drive. Double-click the D drive to enter the root directory of the D drive

build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 }

You can access it by opening the index file from the dist root directory.

3. github pages

1. Create a warehouse on the home page and ignore it directly

2. Select master or /doc here to upload the code to master

3. There is a line of domain name above which is your own page where you can see the projects you published

4. Custom domain name

1. You can browse your own projects at this time, but

username.github.io/xxx/dist

Such an address is really not very beautiful. You can go to Alibaba Cloud, buy a domain name yourself, and parse it. It is available online and can be customized. Use the domain name to create your own blog, and deploy the code to github.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to configure Sass in vue scaffolding

How to use mock data in the vue-cli project

The above is the detailed content of Introduction to the construction, packaging and publishing process of vue project. For more information, please follow other related articles on the PHP Chinese website!