cnodedemo deploy to GitHub

如何创建一个 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 即可