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浏览器环境下没有问题，但是打包以后在真机上会出现路径问题