vue小项目总结与笔记【十一】——vue项目简单打包上线

 

本次项目打包上线流程是这样的：

在cmd命令行运行：

npm run build

 

运行完成后，出现 Build complete 就是成功了。

接下来打开项目目录，看见新增了一个dist文件夹：

 

 

 

把dist文件夹里面的static文件夹和index.html放到后台服务器的根路径下（找到那个WWW）:

 

 

这样就可以访问localhost了。

如果不想把那两个文件放在根路径下，想要有一个文件夹包裹它，那么就需要在config/index.js里找到build，修改 assetsPublicPath：

 

 

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/文件夹名字',

 

 

然后再重新打包

npm run build

 

把dist文件夹改成你想要的文件夹名字，把整个文件夹放到后台服务器的根目录下就可以了。