Vue搭配cordova创建移动端项目遇到的路径问题

使用Vue的教授叫vue-cil创建项目以后,如果我们想进行打包成一个hybrid项目应该怎么做呢?这个时候我们需要全局安装cordova,然后进行打包。但是这里我们要注意一些路径问题。
首先我们要明白的是,cordova打包打包的是那些内容?cordova打包的是www文件夹下的内容,也就是说,我们的内容应该都在www文件夹下面,而我们的源代码要放到src下面去,vue-cil的index.html是在根路径下面的。我们要修改webpack配置

修改webpack.dev/prod.conf.js下面的template

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
      inject: true
    }),

这样我们的模板就是src/index.html了
接下来设置输出路径
设置config里面的index.js的build

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

    // Paths
    assetsRoot: path.resolve(__dirname, '../www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

这里要注意的是assetsPublicPath这个选项。如果不改成./而是原来中的/得话,在dev浏览器环境下没有问题,但是打包以后在真机上会出现路径问题

猜你喜欢

转载自blog.csdn.net/aboyl/article/details/80616655
今日推荐