如何创建一个 vue 项目
vue init webpack + 项目名称cd + 项目名称-
npm install/yarn -
npm run dev/yarn start
建议先安装镜像
npm install -g cnpm --registry=https:registry.npm.taobao.org
如何部署高仿的 cnode 项目
修改配置
1. 解决文件路径问题
打开项目根目录，
config文件夹下，index.js文件
修改内容：
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
注意：是build里面的assetsPublicPath: '/'修改为 assetsPublicPath: './'
2. 背景图片路径错误
在 css 中写的 background-img 的路径出错需要找到
build文件夹中的，utils.js文件
修改内容：
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
注意：if(options.extract)中添加publicPath: '../../'这条语句
3. 项目打包后dist文件夹下的index.html引入文件没有引号
找到
build文件夹下，webpack.prod/conf.js文件
修改内容：
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: false
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
注意：new HtmlWebpackPlugin中的removeAttributeQuotes: true改为false
最后将 dist 文件夹上传到 GitHub 即可
