How to package vue.js project

How to package the vue.js project: first open the "webpack.dev.conf.js" file; then modify the assetsPublicPath under build; finally run the "npm run build" command in the terminal.

The operating environment of this tutorial: windows7 system, webstorm2017.1.4&&vue2.0 version, Dell G3 computer.

Recommended: vue tutorial

vue project packaging steps

vue project packaging

1. Terminal running command npm run build

2. The sign of successful packaging and the change of the project, as shown below:

3. Click index.html and run it through the browser. The following error message appears, as shown in the figure:

##4. How should it be modified? The specific steps are as follows:
1. View the scripts command of the package.js file
2. Open the webpack.dev.conf.js file, find publicPath: config.dev.assetsPublicPath, and press Ctrl to click , jump to the index.js file
3. dev is the development environment, and build is the build version. Find assetsPublicPath under build: '/', and then change it to assetsPublicPath: './', that is, add a dot before "/" .
4. Run npm run build in the terminal.

At this time, click index.html and run it through the browser. You will find that the dynamically bound static image cannot be found, so static must use an absolute path. Change the image path to an absolute path. At this point, packaging is completed.

The above is the detailed content of How to package vue.js project. For more information, please follow other related articles on the PHP Chinese website!