Vue-cli webpack模板项目搭建及打包时路径问题的解决方法

Vue-cli提供了Webpack的模板项目，使用这个模板项目可以快速地搭建一个Vue项目，并且提供了大量的开发工具和插件，方便我们进行开发、调试和打包等操作。但是当我们要在打包时把项目部署到服务器上时，会遇到一些路径问题。

1. 安装Vue-cli

首先，我们需要安装Vue-cli，打开终端（命令行），输入以下命令：

npm install -g vue-cli

2. 创建Vue项目

创建Vue项目，输入以下命令：

vue init webpack my-project

其中，my-project是你要创建的项目名称。

在创建时，可以选择默认设置，也可以根据自己的需求进行选择，例如选择ESLint、Vuex等。

? Generate project in current directory? Yes
? Project name my-project
? Project description A Vue.js project
? Author your name
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

3. 安装依赖

进入项目目录，安装依赖：

cd my-project
npm install

4. 配置路径

4.1 修改config/index.js

在config/index.js文件中，找到如下代码：

build: {
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
}

将assetsPublicPath的值改为./，如下所示：

build: {
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
}

4.2 配置一些需要引用的资源路径

我们可以在我们的Vue项目中，通过像下面这样的方式去引用我们的资源：

<img src="/static/logo.png">

这里的/static/logo.png的前面的斜杠代表根目录，会在构建时替换为assetsPublicPath中的内容。

那么如果我们有一些需要引用的资源路径，需要在assetsPublicPath后面添加一些内容时，可以先在config/index.js中进行配置，如：

build: {
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
  // 添加一些需要引用的资源路径
  staticPath: 'http://www.example.com/static/',
}

然后就可以在我们的Vue项目中，通过像下面这样的方式去引用我们的资源：

<img src="${assets.staticPath}/logo.png">

5. 打包项目

打包项目，输入以下命令：

npm run build

打包成功后，会生成一个dist目录，里面包含了我们打包好的文件。

6. 示例说明

6.1 图片路径问题的解决

当我们在Vue项目中引用图片时，如果不加任何路径信息，那么Webpack将会根据模块规则自动配置图片路径，将其缩进到dist目录下。

<img src="./assets/logo.png">

在打包后生成的文件中，会自动修改路径：

<img src="/static/img/logo.0031d14.png">

这样就可以正确地引用了。

6.2 CSS文件中引用图片问题的解决

在CSS文件中引用图片时，同样会自动缩进到dist目录下，但是需注意，需要在路径前加上~符号，如：

.my-style {
  background-image: url(~assets/images/my-background.png);
}