vue-cli创建项目以及打包

1.安装node环境
2.全局 安装vue-cli
3.创建项目
vue init webpack project-name
cd project-name (进入项目内)
npm install (可省略)
npm run dev(项目启动)

如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader,回车。安装完成后，就可以在style标签下import所需的css文件，例如：

<style>
   @ import './assets/css/public.css'；
</style>

4.打包
npm run build
build完成时候可以在相中发现多了一个dist文件夹，里面包括一个css文件，js文件和index.html

如果静态文件不是部署在网站根目录下，vue-cli将给你造成巨大的麻烦。

你不能直接把build好的文件抛进一个目录。
你不能直接在本地打开用vue做好的静态网站。

改成相对路径，主要需要做两步。
1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./'

image.png

2、在build => util.js 里找到ExtractTextPlugin.extract

增加一行：publicPath: '../../'

image.png

之后，你使用npm run build打包出来的文件，就可以直接打开运行啦！也可以直接作为HTML静态页面仍进服务器

原文链接
https://segmentfault.com/a/1190000010354315